From b57f817d1185ba6543b6b3c07127fe99fcbd723a Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 27 Jul 2021 11:50:27 +0900
Subject: [PATCH 001/106] block api

---
 src/cloud/api/blocks/index.ts        | 45 ++++++++++++++
 src/cloud/lib/hooks/useDocBlocks.ts  | 23 +++++++
 src/cloud/lib/stores/blocks/index.ts | 92 ++++++++++++++++++++++++++++
 3 files changed, 160 insertions(+)
 create mode 100644 src/cloud/api/blocks/index.ts
 create mode 100644 src/cloud/lib/hooks/useDocBlocks.ts
 create mode 100644 src/cloud/lib/stores/blocks/index.ts

diff --git a/src/cloud/api/blocks/index.ts b/src/cloud/api/blocks/index.ts
new file mode 100644
index 0000000000..71aad9b873
--- /dev/null
+++ b/src/cloud/api/blocks/index.ts
@@ -0,0 +1,45 @@
+import { callApi } from '../../lib/client'
+
+export interface Block<T extends string, D> {
+  type: T
+  id: string
+  name: string
+  children: Block<any, any>[]
+  data: D
+  doc: string
+}
+
+export async function getDocBlocks(docId: string): Promise<Block<any, any>[]> {
+  const { blocks } = await callApi(`api/blocks`, {
+    search: { tree: true, doc: docId },
+  })
+
+  return blocks
+}
+
+export async function createBlock(
+  body: Omit<Block<any, any>, 'id'>,
+  parent?: string
+): Promise<Block<any, any>> {
+  const { block } = await callApi(`api/blocks`, {
+    method: 'post',
+    json: { ...body, parent },
+  })
+
+  return block
+}
+
+export async function updateBlock(
+  body: Block<any, any>
+): Promise<Block<any, any>> {
+  const { block } = await callApi(`api/blocks/${body.id}`, {
+    method: 'put',
+    json: body,
+  })
+
+  return block
+}
+
+export async function deleteBlock(id: string) {
+  await callApi(`api/blocks/${id}`, { method: 'delete' })
+}
diff --git a/src/cloud/lib/hooks/useDocBlocks.ts b/src/cloud/lib/hooks/useDocBlocks.ts
new file mode 100644
index 0000000000..ea11a1aa62
--- /dev/null
+++ b/src/cloud/lib/hooks/useDocBlocks.ts
@@ -0,0 +1,23 @@
+import { useBlocks } from '../stores/blocks'
+import { useEffect, useState } from 'react'
+import { Block } from '../../api/blocks'
+
+type BlockState =
+  | { type: 'loading' }
+  | { type: 'loaded'; blocks: Block<any, any>[] }
+
+export function useDocBlocks(id: string) {
+  const { observeDocBlocks, ...actions } = useBlocks()
+  const [state, setState] = useState<BlockState>({ type: 'loading' })
+
+  useEffect(() => {
+    return observeDocBlocks(id, (blocks) => {
+      setState({ type: 'loaded', blocks })
+    })
+  }, [id, observeDocBlocks])
+
+  return {
+    state,
+    actions,
+  }
+}
diff --git a/src/cloud/lib/stores/blocks/index.ts b/src/cloud/lib/stores/blocks/index.ts
new file mode 100644
index 0000000000..e16e4ba55e
--- /dev/null
+++ b/src/cloud/lib/stores/blocks/index.ts
@@ -0,0 +1,92 @@
+import { createStoreContext } from '../../utils/context'
+import { useToast } from '../../../../shared/lib/stores/toast'
+import { useRef, useCallback } from 'react'
+import {
+  Block,
+  getDocBlocks,
+  deleteBlock,
+  updateBlock,
+  createBlock,
+} from '../../../api/blocks'
+
+type BlocksObserver = (blocks: Block<any, any>[]) => void
+
+function useBlocksStore() {
+  const { pushApiErrorMessage } = useToast()
+  const blocksCache = useRef<Map<string, Block<any, any>[]>>(new Map())
+  const docBlockObservers = useRef<Map<string, Set<BlocksObserver>>>(new Map())
+
+  const getBlocks = useCallback(
+    async (doc: string) => {
+      try {
+        const blocks = await getDocBlocks(doc)
+        blocksCache.current.set(doc, blocks)
+        const observers = docBlockObservers.current.get(doc) || new Set()
+        for (const observer of observers) {
+          observer(blocks)
+        }
+        return true
+      } catch (err) {
+        pushApiErrorMessage(err)
+        return false
+      }
+    },
+    [pushApiErrorMessage]
+  )
+
+  const observeDocBlocks = useCallback(
+    (doc: string, observer: BlocksObserver) => {
+      const observers = docBlockObservers.current.get(doc) || new Set()
+      observers.add(observer)
+      docBlockObservers.current.set(doc, observers)
+      Promise.resolve(() => {
+        if (blocksCache.current.has(doc)) {
+          observer(blocksCache.current.get(doc)!)
+        }
+      })
+      getBlocks(doc)
+      return () => {
+        observers.delete(observer)
+      }
+    },
+    [getBlocks]
+  )
+
+  const create: typeof createBlock = useCallback(
+    async (body, parent) => {
+      const block = await createBlock(body, parent)
+      await getBlocks(block.doc)
+      return block
+    },
+    [getBlocks]
+  )
+
+  const remove = useCallback(
+    async (block: Block<any, any>) => {
+      await deleteBlock(block.id)
+      await getBlocks(block.doc)
+    },
+    [getBlocks]
+  )
+
+  const update: typeof updateBlock = useCallback(
+    async (block) => {
+      const updated = await updateBlock(block)
+      await getBlocks(updated.doc)
+      return updated
+    },
+    [getBlocks]
+  )
+
+  return {
+    observeDocBlocks,
+    create,
+    remove,
+    update,
+  }
+}
+
+export const {
+  StoreProvider: BlocksProvider,
+  useStore: useBlocks,
+} = createStoreContext(useBlocksStore, 'comments')

From 600829ccbdd1e59376c27fd69cb2db00f1b346a3 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:05:07 +0900
Subject: [PATCH 002/106] blocks api

---
 src/cloud/api/blocks/index.ts                | 48 ++++++++++----
 src/cloud/api/teams/docs/index.ts            |  1 +
 src/cloud/components/Blocks/BlockContent.tsx | 70 ++++++++++++++++++++
 3 files changed, 106 insertions(+), 13 deletions(-)
 create mode 100644 src/cloud/components/Blocks/BlockContent.tsx

diff --git a/src/cloud/api/blocks/index.ts b/src/cloud/api/blocks/index.ts
index 71aad9b873..d3740d2424 100644
--- a/src/cloud/api/blocks/index.ts
+++ b/src/cloud/api/blocks/index.ts
@@ -1,26 +1,50 @@
 import { callApi } from '../../lib/client'
 
-export interface Block<T extends string, D> {
+interface BlockType<
+  T extends string,
+  D,
+  C extends BlockType<any, any, any> = never
+> {
   type: T
   id: string
   name: string
-  children: Block<any, any>[]
+  children: C[]
   data: D
-  doc: string
 }
 
-export async function getDocBlocks(docId: string): Promise<Block<any, any>[]> {
-  const { blocks } = await callApi(`api/blocks`, {
-    search: { tree: true, doc: docId },
+export type MarkdownBlock = BlockType<'markdown', null>
+export type EmbedBlock = BlockType<'embed', { url: string }>
+export type GithubIssueBlock = BlockType<'github.issue', any>
+export type TableBlock = BlockType<
+  'table',
+  { columns: Record<string, string> },
+  GithubIssueBlock
+>
+export type ContainerBlock = BlockType<
+  'container',
+  null,
+  MarkdownBlock | EmbedBlock | TableBlock | ContainerBlock
+>
+
+export type Block =
+  | MarkdownBlock
+  | EmbedBlock
+  | TableBlock
+  | ContainerBlock
+  | GithubIssueBlock
+
+export async function getBlockTree(rootBlock: string): Promise<Block> {
+  const { block } = await callApi(`api/blocks/${rootBlock}`, {
+    search: { tree: true },
   })
 
-  return blocks
+  return block
 }
 
 export async function createBlock(
-  body: Omit<Block<any, any>, 'id'>,
-  parent?: string
-): Promise<Block<any, any>> {
+  body: Omit<Block, 'id'>,
+  parent: string
+): Promise<Block> {
   const { block } = await callApi(`api/blocks`, {
     method: 'post',
     json: { ...body, parent },
@@ -29,9 +53,7 @@ export async function createBlock(
   return block
 }
 
-export async function updateBlock(
-  body: Block<any, any>
-): Promise<Block<any, any>> {
+export async function updateBlock(body: Block): Promise<Block> {
   const { block } = await callApi(`api/blocks/${body.id}`, {
     method: 'put',
     json: body,
diff --git a/src/cloud/api/teams/docs/index.ts b/src/cloud/api/teams/docs/index.ts
index 48117f8473..e1da47fbb6 100644
--- a/src/cloud/api/teams/docs/index.ts
+++ b/src/cloud/api/teams/docs/index.ts
@@ -22,6 +22,7 @@ export interface CreateDocRequestBody {
   template?: string
   title?: string
   emoji?: string
+  blocks?: boolean
 }
 
 export interface CreateDocResponseBody {
diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
new file mode 100644
index 0000000000..395ddff70c
--- /dev/null
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -0,0 +1,70 @@
+import React, { useCallback } from 'react'
+import { SerializedDoc } from '../../../interfaces/db/doc'
+import { useDocBlocks } from '../../../lib/hooks/useDocBlocks'
+import { Block } from '../../../api/blocks'
+import { capitalize } from '../../../../lib/string'
+
+const BlockContent = (doc: SerializedDoc) => {
+  const { state, actions } = useDocBlocks(doc.id)
+
+  const createContainer = useCallback(() => {
+    return actions.create({
+      name: 'container',
+      type: 'container',
+      doc: doc.id,
+      children: [],
+      data: null,
+    })
+  }, [doc, actions])
+
+  if (state.type === 'loading') {
+    return <div>loading</div>
+  }
+
+  return (
+    <div>
+      <div>
+        <BlockTree blocks={state.blocks} />
+        <div>
+          <div>New Items</div>
+          <div onClick={createContainer}>Container</div>
+          <div>Table</div>
+          <div>Embed</div>
+        </div>
+      </div>
+      <div>
+        <BlockView blocks={state.blocks} />
+        <div>Add Block</div>
+      </div>
+    </div>
+  )
+}
+
+interface BlockTreeProps {
+  blocks: Block<any, any>[]
+}
+
+const BlockTree = ({ blocks }: BlockTreeProps) => {
+  return (
+    <div>
+      {blocks.map((block) => {
+        return (
+          <div key={block.id}>
+            <div>{capitalize(block.type)}</div>
+            {block.children.length > 0 && <BlockTree blocks={block.children} />}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+interface BlockViewProps {
+  blocks: Block<any, any>[]
+}
+
+const BlockView = ({ blocks }: BlockViewProps) => {
+  return <pre>{JSON.stringify(blocks)}</pre>
+}
+
+export default BlockContent

From aef05e78db0d23c889cd3ec66731d258984198aa Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:05:23 +0900
Subject: [PATCH 003/106] integration action api

---
 src/cloud/api/integrations/index.ts | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/cloud/api/integrations/index.ts b/src/cloud/api/integrations/index.ts
index f2ff343f89..9f08fd9e02 100644
--- a/src/cloud/api/integrations/index.ts
+++ b/src/cloud/api/integrations/index.ts
@@ -16,3 +16,29 @@ export async function deleteTeamIntegration(
 ) {
   return callApi(`api/integrations/${integration.id}`, { method: 'delete' })
 }
+
+export interface IntegrationActionTypes {
+  ['orgs:list']: {
+    id: string
+    login: string
+  }[]
+  ['org:repos']: {
+    id: string
+    name: string
+    owner: {
+      login: string
+    }
+  }[]
+  ['repo:issues']: any[]
+}
+
+export async function getAction<A extends keyof IntegrationActionTypes>(
+  integration: SerializedTeamIntegration,
+  action: A,
+  args?: Record<string, any>
+): Promise<IntegrationActionTypes[A]> {
+  const { data } = await callApi(`/api/integrations/${integration.id}/action`, {
+    search: { action, ...args },
+  })
+  return data
+}

From ce0de747c73ee7c1048146c2e84ff5bf5dc28347 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:05:48 +0900
Subject: [PATCH 004/106] update doc interface

---
 src/cloud/interfaces/db/doc.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/cloud/interfaces/db/doc.ts b/src/cloud/interfaces/db/doc.ts
index 8948e08b50..a2026855d3 100644
--- a/src/cloud/interfaces/db/doc.ts
+++ b/src/cloud/interfaces/db/doc.ts
@@ -5,6 +5,7 @@ import type { SerializedTag } from './tag'
 import { SerializedWorkspace } from './workspace'
 import { SerializedShareLink } from './shareLink'
 import { SerializedUser } from './user'
+import { ContainerBlock } from '../../api/blocks'
 
 export type DocStatus = 'in_progress' | 'completed' | 'archived' | 'paused'
 
@@ -30,6 +31,7 @@ export interface SerializableDocProps {
   dueDate: string
   assignees?: SerializedDocAssignee[]
   userId?: string
+  rootBlock?: ContainerBlock
 }
 
 export interface SerializedUnserializableDocProps {

From b299b7c0f2e4f4ecd04a8e65ede1d85d18c59d84 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:08:03 +0900
Subject: [PATCH 005/106] blocks store

---
 src/cloud/components/Router.tsx               |  4 +-
 .../lib/hooks/useCloudResourceModals.tsx      |  2 +
 src/cloud/lib/hooks/useDocBlocks.ts           | 30 +++++++++---
 src/cloud/lib/stores/blocks/index.ts          | 48 +++++++++----------
 4 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/src/cloud/components/Router.tsx b/src/cloud/components/Router.tsx
index 31ebb7c095..83cf3430b4 100644
--- a/src/cloud/components/Router.tsx
+++ b/src/cloud/components/Router.tsx
@@ -62,6 +62,7 @@ import Spinner from '../../design/components/atoms/Spinner'
 import { TeamPreferencesProvider } from '../lib/stores/teamPreferences'
 import Application from './Application'
 import { BaseTheme } from '../../design/lib/styled/types'
+import { BlocksProvider } from '../lib/stores/blocks'
 
 const CombinedProvider = combineProviders(
   TeamStorageProvider,
@@ -84,7 +85,8 @@ const V2CombinedProvider = combineProviders(
   V2DialogProvider,
   CommentsProvider,
   NotificationsProvider,
-  TeamIntegrationsProvider
+  TeamIntegrationsProvider,
+  BlocksProvider
 )
 
 interface PageInfo {
diff --git a/src/cloud/lib/hooks/useCloudResourceModals.tsx b/src/cloud/lib/hooks/useCloudResourceModals.tsx
index e31e6e6531..ac20782b2d 100644
--- a/src/cloud/lib/hooks/useCloudResourceModals.tsx
+++ b/src/cloud/lib/hooks/useCloudResourceModals.tsx
@@ -182,6 +182,7 @@ export function useCloudResourceModals() {
                 parentFolderId: body.parentFolderId,
                 title: inputValue,
                 emoji,
+                blocks: body.blocks,
               },
               {
                 skipRedirect: options?.skipRedirect,
@@ -302,6 +303,7 @@ export interface CloudNewResourceRequestBody {
   team?: SerializedTeam
   workspaceId?: string
   parentFolderId?: string
+  blocks?: boolean
 }
 
 export type UIFormOptions = SubmissionWrappers & {
diff --git a/src/cloud/lib/hooks/useDocBlocks.ts b/src/cloud/lib/hooks/useDocBlocks.ts
index ea11a1aa62..f94279aba4 100644
--- a/src/cloud/lib/hooks/useDocBlocks.ts
+++ b/src/cloud/lib/hooks/useDocBlocks.ts
@@ -1,21 +1,37 @@
 import { useBlocks } from '../stores/blocks'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 import { Block } from '../../api/blocks'
 
-type BlockState =
-  | { type: 'loading' }
-  | { type: 'loaded'; blocks: Block<any, any>[] }
+type BlockState = { type: 'loading' } | { type: 'loaded'; block: Block }
+
+export interface BlockActions {
+  create: (block: Omit<Block, 'id'>, parent: Block) => Promise<Block>
+  update: (block: Block) => Promise<Block>
+  remove: (block: Block) => Promise<void>
+}
 
 export function useDocBlocks(id: string) {
-  const { observeDocBlocks, ...actions } = useBlocks()
+  const { observeDocBlocks, create, update, remove } = useBlocks()
   const [state, setState] = useState<BlockState>({ type: 'loading' })
 
   useEffect(() => {
-    return observeDocBlocks(id, (blocks) => {
-      setState({ type: 'loaded', blocks })
+    const unsub = observeDocBlocks(id, (block) => {
+      setState({ type: 'loaded', block })
     })
+    return () => {
+      setState({ type: 'loading' })
+      unsub()
+    }
   }, [id, observeDocBlocks])
 
+  const actions: BlockActions = useMemo(() => {
+    return {
+      create: (block, parent) => create(block, parent, id),
+      update: (block) => update(block, id),
+      remove: (block) => remove(block, id),
+    }
+  }, [id, create, update, remove])
+
   return {
     state,
     actions,
diff --git a/src/cloud/lib/stores/blocks/index.ts b/src/cloud/lib/stores/blocks/index.ts
index e16e4ba55e..8e37f6588c 100644
--- a/src/cloud/lib/stores/blocks/index.ts
+++ b/src/cloud/lib/stores/blocks/index.ts
@@ -3,25 +3,25 @@ import { useToast } from '../../../../shared/lib/stores/toast'
 import { useRef, useCallback } from 'react'
 import {
   Block,
-  getDocBlocks,
+  getBlockTree,
   deleteBlock,
   updateBlock,
   createBlock,
 } from '../../../api/blocks'
 
-type BlocksObserver = (blocks: Block<any, any>[]) => void
+type BlocksObserver = (blocks: Block) => void
 
 function useBlocksStore() {
   const { pushApiErrorMessage } = useToast()
-  const blocksCache = useRef<Map<string, Block<any, any>[]>>(new Map())
-  const docBlockObservers = useRef<Map<string, Set<BlocksObserver>>>(new Map())
+  const treeCache = useRef<Map<string, Block>>(new Map())
+  const treeObservers = useRef<Map<string, Set<BlocksObserver>>>(new Map())
 
   const getBlocks = useCallback(
-    async (doc: string) => {
+    async (rootBlock: string) => {
       try {
-        const blocks = await getDocBlocks(doc)
-        blocksCache.current.set(doc, blocks)
-        const observers = docBlockObservers.current.get(doc) || new Set()
+        const blocks = await getBlockTree(rootBlock)
+        treeCache.current.set(rootBlock, blocks)
+        const observers = treeObservers.current.get(rootBlock) || new Set()
         for (const observer of observers) {
           observer(blocks)
         }
@@ -35,16 +35,16 @@ function useBlocksStore() {
   )
 
   const observeDocBlocks = useCallback(
-    (doc: string, observer: BlocksObserver) => {
-      const observers = docBlockObservers.current.get(doc) || new Set()
+    (rootBlock: string, observer: BlocksObserver) => {
+      const observers = treeObservers.current.get(rootBlock) || new Set()
       observers.add(observer)
-      docBlockObservers.current.set(doc, observers)
+      treeObservers.current.set(rootBlock, observers)
       Promise.resolve(() => {
-        if (blocksCache.current.has(doc)) {
-          observer(blocksCache.current.get(doc)!)
+        if (treeCache.current.has(rootBlock)) {
+          observer(treeCache.current.get(rootBlock)!)
         }
       })
-      getBlocks(doc)
+      getBlocks(rootBlock)
       return () => {
         observers.delete(observer)
       }
@@ -52,27 +52,27 @@ function useBlocksStore() {
     [getBlocks]
   )
 
-  const create: typeof createBlock = useCallback(
-    async (body, parent) => {
-      const block = await createBlock(body, parent)
-      await getBlocks(block.doc)
+  const create = useCallback(
+    async (body: Omit<Block, 'id'>, parent: Block, root: string) => {
+      const block = await createBlock(body, parent.id)
+      await getBlocks(root)
       return block
     },
     [getBlocks]
   )
 
   const remove = useCallback(
-    async (block: Block<any, any>) => {
+    async (block: Block, root: string) => {
       await deleteBlock(block.id)
-      await getBlocks(block.doc)
+      await getBlocks(root)
     },
     [getBlocks]
   )
 
-  const update: typeof updateBlock = useCallback(
-    async (block) => {
+  const update = useCallback(
+    async (block: Block, root: string) => {
       const updated = await updateBlock(block)
-      await getBlocks(updated.doc)
+      await getBlocks(root)
       return updated
     },
     [getBlocks]
@@ -89,4 +89,4 @@ function useBlocksStore() {
 export const {
   StoreProvider: BlocksProvider,
   useStore: useBlocks,
-} = createStoreContext(useBlocksStore, 'comments')
+} = createStoreContext(useBlocksStore, 'blocks')

From aa58063090c0e13f1135b9775f7cb2d604abee96 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:08:37 +0900
Subject: [PATCH 006/106] Update new doc button

---
 src/cloud/components/buttons/NewDocButton.tsx | 85 ++++++++++++++-----
 src/cloud/lib/i18n/enUS.ts                    |  1 +
 src/cloud/lib/i18n/types.ts                   |  1 +
 3 files changed, 65 insertions(+), 22 deletions(-)

diff --git a/src/cloud/components/buttons/NewDocButton.tsx b/src/cloud/components/buttons/NewDocButton.tsx
index efc354b2de..5970aa6122 100644
--- a/src/cloud/components/buttons/NewDocButton.tsx
+++ b/src/cloud/components/buttons/NewDocButton.tsx
@@ -1,8 +1,16 @@
-import { mdiPencilBoxMultipleOutline, mdiTextBoxPlus } from '@mdi/js'
-import React from 'react'
 import SidebarButton from '../../../design/components/organisms/Sidebar/atoms/SidebarButton'
-import { MenuTypes } from '../../../design/lib/stores/contextMenu'
+import {
+  MenuTypes,
+  useContextMenu,
+} from '../../../design/lib/stores/contextMenu'
 import { useModal } from '../../../design/lib/stores/modal'
+import {
+  mdiPencilBoxMultipleOutline,
+  mdiPackageVariantClosed,
+  mdiTextBoxPlusOutline,
+  mdiPencilBoxOutline,
+} from '@mdi/js'
+import React, { useCallback } from 'react'
 import { SerializedTeam } from '../../interfaces/db/team'
 import { useCloudResourceModals } from '../../lib/hooks/useCloudResourceModals'
 import { useI18n } from '../../lib/hooks/useI18n'
@@ -20,31 +28,64 @@ const NewDocButton = ({ team }: { team: SerializedTeam }) => {
   const { openNewDocForm } = useCloudResourceModals()
   const { openModal } = useModal()
   const { translate } = useI18n()
+  const { popup } = useContextMenu()
 
+  const openNewDocModal = useCallback(
+    (isCanvas = false) => {
+      openNewDocForm(
+        {
+          team,
+          parentFolderId: currentParentFolderId,
+          workspaceId: currentWorkspaceId,
+          blocks: isCanvas,
+        },
+        {
+          precedingRows: [
+            {
+              description: `${
+                workspacesMap.get(currentWorkspaceId || '')?.name
+              }${currentPath}`,
+            },
+          ],
+        }
+      )
+    },
+    [
+      openNewDocForm,
+      workspacesMap,
+      currentWorkspaceId,
+      team,
+      currentParentFolderId,
+      currentPath,
+    ]
+  )
+
+  const openDocTypeSelect: React.MouseEventHandler = useCallback(
+    (ev) => {
+      popup(ev, [
+        {
+          icon: mdiTextBoxPlusOutline,
+          type: MenuTypes.Normal,
+          label: translate(lngKeys.CreateNewDoc),
+          onClick: () => openNewDocModal(),
+        },
+        {
+          icon: mdiPackageVariantClosed,
+          type: MenuTypes.Normal,
+          label: translate(lngKeys.CreateNewCanvas),
+          onClick: () => openNewDocModal(true),
+        },
+      ])
+    },
+    [openNewDocModal, popup, translate]
+  )
   return (
     <SidebarButton
       variant='primary'
-      icon={mdiTextBoxPlus}
+      icon={mdiPencilBoxOutline}
       id='sidebar-newdoc-btn'
       label={translate(lngKeys.CreateNewDoc)}
-      labelClick={() =>
-        openNewDocForm(
-          {
-            team,
-            parentFolderId: currentParentFolderId,
-            workspaceId: currentWorkspaceId,
-          },
-          {
-            precedingRows: [
-              {
-                description: `${
-                  workspacesMap.get(currentWorkspaceId || '')?.name
-                }${currentPath}`,
-              },
-            ],
-          }
-        )
-      }
+      labelClick={openDocTypeSelect}
       contextControls={[
         {
           icon: mdiPencilBoxMultipleOutline,
diff --git a/src/cloud/lib/i18n/enUS.ts b/src/cloud/lib/i18n/enUS.ts
index c2b5198581..bafcf34363 100644
--- a/src/cloud/lib/i18n/enUS.ts
+++ b/src/cloud/lib/i18n/enUS.ts
@@ -239,6 +239,7 @@ const enTranslation: TranslationSource = {
   [lngKeys.SortTitleZA]: 'Title Z-A',
   [lngKeys.SortDragAndDrop]: 'Drag and Drop',
   [lngKeys.CreateNewDoc]: 'Create new doc',
+  [lngKeys.CreateNewCanvas]: 'Create new canvas (beta)',
   [lngKeys.UseATemplate]: 'Use a template',
   [lngKeys.RenameFolder]: 'Rename folder',
   [lngKeys.RenameDoc]: 'Rename doc',
diff --git a/src/cloud/lib/i18n/types.ts b/src/cloud/lib/i18n/types.ts
index 103db2c255..dda4ffdceb 100644
--- a/src/cloud/lib/i18n/types.ts
+++ b/src/cloud/lib/i18n/types.ts
@@ -284,6 +284,7 @@ export enum lngKeys {
   SortTitleZA = 'sort.z-a',
   SortDragAndDrop = 'sort.drag',
   CreateNewDoc = 'create.new.doc',
+  CreateNewCanvas = 'create.new.canvas',
   UseATemplate = 'use.a.template',
   RenameFolder = 'Rename.folder',
   RenameDoc = 'Rename.doc',

From bb87be2780460a9dbd0f5d407c475bf7e72ece83 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:10:22 +0900
Subject: [PATCH 007/106] new github integration page

---
 src/cloud/components/Blocks/BlockContent.tsx  |  27 +--
 .../components/settings/GithubIntegration.tsx | 171 ++---------------
 .../settings/IntegrationManager.tsx           | 176 ++++++++++++++++++
 .../components/settings/SlackIntegration.tsx  | 172 +----------------
 .../organisms/Sidebar/atoms/SidebarButton.tsx |   4 +-
 5 files changed, 214 insertions(+), 336 deletions(-)
 create mode 100644 src/cloud/components/settings/IntegrationManager.tsx

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index 395ddff70c..58dfefb9cb 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -1,20 +1,23 @@
 import React, { useCallback } from 'react'
-import { SerializedDoc } from '../../../interfaces/db/doc'
-import { useDocBlocks } from '../../../lib/hooks/useDocBlocks'
-import { Block } from '../../../api/blocks'
-import { capitalize } from '../../../../lib/string'
+import { Block } from '../../api/blocks'
+import { SerializedDoc } from '../../interfaces/db/doc'
+import { useDocBlocks } from '../../lib/hooks/useDocBlocks'
 
 const BlockContent = (doc: SerializedDoc) => {
   const { state, actions } = useDocBlocks(doc.id)
 
-  const createContainer = useCallback(() => {
-    return actions.create({
-      name: 'container',
-      type: 'container',
-      doc: doc.id,
-      children: [],
-      data: null,
-    })
+  const createContainer = useCallback(async () => {
+    if (doc.rootBlock != null) {
+      await actions.create(
+        {
+          name: 'container',
+          type: 'container',
+          children: [],
+          data: null,
+        },
+        doc.rootBlock
+      )
+    }
   }, [doc, actions])
 
   if (state.type === 'loading') {
diff --git a/src/cloud/components/settings/GithubIntegration.tsx b/src/cloud/components/settings/GithubIntegration.tsx
index 1f5263cda7..52bef25478 100644
--- a/src/cloud/components/settings/GithubIntegration.tsx
+++ b/src/cloud/components/settings/GithubIntegration.tsx
@@ -1,172 +1,23 @@
-import React, { useCallback, useMemo } from 'react'
-import ServiceConnect, { Integration } from '../ServiceConnect'
-import {
-  useServiceConnections,
-  withServiceConnections,
-} from '../../lib/stores/serviceConnections'
-import { githubOauthId, boostHubBaseUrl } from '../../lib/consts'
-import { usingElectron } from '../../lib/stores/electron'
-import { openNew } from '../../lib/utils/platform'
-import { usePage } from '../../lib/stores/pageStore'
+import React from 'react'
 import SettingTabContent from '../../../design/components/organisms/Settings/atoms/SettingTabContent'
-import Button, { LoadingButton } from '../../../design/components/atoms/Button'
-import { useI18n } from '../../lib/hooks/useI18n'
-import { lngKeys } from '../../lib/i18n/types'
-import styled from '../../../design/lib/styled'
+import IntegrationManager from './IntegrationManager'
 
 const GithubIntegrations = () => {
-  const connectionState = useServiceConnections()
-  const { team } = usePage()
-  const { translate } = useI18n()
-
-  const githubConnection = useMemo(() => {
-    return connectionState.type !== 'initialising'
-      ? connectionState.connections.find((conn) => conn.service === 'github')
-      : null
-  }, [connectionState])
-
-  const removeGithubConnection = useCallback(() => {
-    if (connectionState.type !== 'initialising' && githubConnection != null) {
-      connectionState.actions.removeConnection(githubConnection)
-    }
-  }, [githubConnection, connectionState])
-
-  const addConnection = useCallback(
-    (integration: Integration) => {
-      if (
-        connectionState.type !== 'initialising' &&
-        integration.type === 'user'
-      ) {
-        connectionState.actions.addConnection(integration.integration)
-      }
-    },
-    [connectionState]
-  )
-
   return (
     <SettingTabContent
       title='GitHub'
       body={
-        <StyledGithubIntegration>
-          <div className='integration__description'>
-            <h3>How does it work?</h3>
-            <p>
-              Embed the issues and pull requests in GitHub private repository
-              into Boost Note documents
-            </p>
-          </div>
-          <div className='integration__connect'>
-            <div className='integration__connect__info'>
-              <img src='/app/static/logos/github.png' alt='GitHub' />
-              <p>Connect Boost Note with GitHub private repository</p>
-            </div>
-            {(connectionState.type === 'initialising' ||
-              connectionState.type === 'working') && (
-              <LoadingButton
-                variant='secondary'
-                className='item-btn'
-                spinning={true}
-              />
-            )}
-            {connectionState.type === 'initialised' && (
-              <>
-                {githubConnection == null ? (
-                  usingElectron ? (
-                    <Button
-                      variant='secondary'
-                      onClick={() => {
-                        openNew(`${boostHubBaseUrl}/${team?.domain}`)
-                      }}
-                    >
-                      {translate(lngKeys.ExternalEntityOpenInBrowser)}
-                    </Button>
-                  ) : (
-                    <ServiceConnect
-                      variant='secondary'
-                      className='item-btn'
-                      service='github'
-                      onConnect={addConnection}
-                    >
-                      {translate(lngKeys.GeneralEnableVerb)}
-                    </ServiceConnect>
-                  )
-                ) : (
-                  <Button
-                    variant='danger'
-                    className='item-btn'
-                    onClick={removeGithubConnection}
-                  >
-                    {translate(lngKeys.GeneralDisableVerb)}
-                  </Button>
-                )}
-              </>
-            )}
-          </div>
-          <div className='integration__connect__meta'>
-            <div>
-              Manage access via GitHub{' '}
-              <a
-                target='_blank'
-                rel='noreferrer noopener'
-                href={`https://github.com/settings/connections/applications/${githubOauthId}`}
-              >
-                here
-              </a>
-            </div>
-          </div>
-        </StyledGithubIntegration>
+        <IntegrationManager
+          service='github:team'
+          name='Github'
+          icon='/app/static/logos/github.png'
+        >
+          <h3>How does it work?</h3>
+          <p>Create Github Issue blocks in Canvas Documents (beta)</p>
+        </IntegrationManager>
       }
     />
   )
 }
 
-const StyledGithubIntegration = styled.div`
-  & .integration__connect {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: ${({ theme }) => theme.sizes.spaces.sm}px;
-    background-color: ${({ theme }) => theme.colors.background.primary};
-    border: 1px solid ${({ theme }) => theme.colors.border.main};
-
-    & .integration__connect__info {
-      display: flex;
-      align-items: center;
-    }
-    img {
-      height: 30px;
-      margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
-    }
-
-    p {
-      margin: 0;
-    }
-  }
-
-  & .integration__connect__meta {
-    display: flex;
-    justify-content: flex-end;
-    font-size: ${({ theme }) => theme.sizes.fonts.sm}px;
-    margin-top: ${({ theme }) => theme.sizes.spaces.xsm}px;
-    color: ${({ theme }) => theme.colors.text.subtle};
-    a {
-      color: ${({ theme }) => theme.colors.text.link};
-      text-decoration: underline;
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-      }
-    }
-  }
-
-  .integration__description {
-    padding: ${({ theme }) => theme.sizes.spaces.df}px 0;
-
-    p {
-      color: ${({ theme }) => theme.colors.text.subtle};
-    }
-  }
-`
-
-export default withServiceConnections(GithubIntegrations)
+export default GithubIntegrations
diff --git a/src/cloud/components/settings/IntegrationManager.tsx b/src/cloud/components/settings/IntegrationManager.tsx
new file mode 100644
index 0000000000..890a32f11e
--- /dev/null
+++ b/src/cloud/components/settings/IntegrationManager.tsx
@@ -0,0 +1,176 @@
+import React, { useCallback, useMemo } from 'react'
+import Button from '../../../design/components/atoms/Button'
+import Spinner from '../../../design/components/atoms/Spinner'
+import { useTeamIntegrations } from '../../../design/lib/stores/integrations'
+import styled from '../../../design/lib/styled'
+import { boostHubBaseUrl } from '../../lib/consts'
+import { useI18n } from '../../lib/hooks/useI18n'
+import { lngKeys } from '../../lib/i18n/types'
+import { usingElectron } from '../../lib/stores/electron'
+import { usePage } from '../../lib/stores/pageStore'
+import { openNew } from '../../lib/utils/platform'
+import ServiceConnect, { Integration } from '../ServiceConnect'
+
+interface IntegrationManagerProps {
+  service: string
+  icon: string
+  name: string
+}
+
+const IntegrationManager = ({
+  service,
+  icon,
+  name,
+  children,
+}: React.PropsWithChildren<IntegrationManagerProps>) => {
+  const integrationState = useTeamIntegrations()
+  const { team } = usePage()
+  const { translate } = useI18n()
+
+  const addIntegration = useCallback(
+    (integration: Integration) => {
+      if (
+        integrationState.type !== 'initialising' &&
+        integration.type === 'team'
+      ) {
+        integrationState.actions.addIntegration(integration.integration)
+      }
+    },
+    [integrationState]
+  )
+
+  const integrations = useMemo(() => {
+    if (integrationState.type === 'initialising') {
+      return []
+    }
+
+    return integrationState.integrations.filter(
+      (integration) => integration.service === service
+    )
+  }, [integrationState, service])
+
+  return (
+    <StyledIntegrationManager>
+      <div className='integration__description'>{children}</div>
+      <div className='integration__content'>
+        <div className='integration__connect'>
+          <div className='integration__connect__info'>
+            <img src={icon} alt={name} />
+            <p>Connect Boost Note with {name}</p>
+          </div>
+          {(integrationState.type === 'initialising' ||
+            integrationState.type === 'working') && (
+            <Button variant='secondary' className='item-btn'>
+              <Spinner />
+            </Button>
+          )}
+          {integrationState.type === 'initialised' &&
+            (usingElectron ? (
+              <Button
+                variant='secondary'
+                onClick={() => {
+                  openNew(`${boostHubBaseUrl}/${team?.domain}`)
+                }}
+              >
+                {translate(lngKeys.ExternalEntityOpenInBrowser)}
+              </Button>
+            ) : (
+              <ServiceConnect
+                variant='secondary'
+                className='item-btn'
+                service={service}
+                team={team}
+                onConnect={addIntegration}
+              >
+                {translate(lngKeys.GeneralAddVerb)}
+              </ServiceConnect>
+            ))}
+        </div>
+        {integrationState.type !== 'initialising' && (
+          <>
+            {integrations.length > 0 && <h3>Connected Teams:</h3>}
+            {integrations.map((integration) => (
+              <div className='integration__list__item' key={integration.id}>
+                <h3>{integration.name}</h3>
+
+                <Button
+                  variant='danger'
+                  onClick={() => {
+                    integrationState.actions.removeIntegration(integration)
+                  }}
+                >
+                  {translate(lngKeys.GeneralRemoveVerb)}
+                </Button>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+    </StyledIntegrationManager>
+  )
+}
+
+const StyledIntegrationManager = styled.div`
+  & .integration__content {
+    padding: ${({ theme }) => theme.sizes.spaces.sm}px;
+    background-color: ${({ theme }) => theme.colors.background.primary};
+    border: 1px solid ${({ theme }) => theme.colors.border.main};
+  }
+
+  & .integration__list__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-left: ${({ theme }) => theme.sizes.spaces.sm}px;
+  }
+
+  & .integration__connect {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    & .integration__connect__info {
+      display: flex;
+      align-items: center;
+    }
+    img {
+      height: 30px;
+      margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  & .integration__connect__meta {
+    display: flex;
+    justify-content: flex-end;
+    font-size: ${({ theme }) => theme.sizes.fonts.sm}px;
+    margin-top: ${({ theme }) => theme.sizes.spaces.xsm}px;
+    color: ${({ theme }) => theme.colors.text.subtle};
+    a {
+      color: ${({ theme }) => theme.colors.text.primary};
+      text-decoration: underline;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .integration__description {
+    padding: ${({ theme }) => theme.sizes.spaces.df}px 0;
+
+    h3 {
+      margin-top: 0;
+    }
+
+    p {
+      color: ${({ theme }) => theme.colors.text.subtle};
+    }
+  }
+`
+
+export default IntegrationManager
diff --git a/src/cloud/components/settings/SlackIntegration.tsx b/src/cloud/components/settings/SlackIntegration.tsx
index 0169e4cec0..32d2784e7c 100644
--- a/src/cloud/components/settings/SlackIntegration.tsx
+++ b/src/cloud/components/settings/SlackIntegration.tsx
@@ -1,175 +1,23 @@
-import React, { useCallback, useMemo } from 'react'
-import ServiceConnect, { Integration } from '../ServiceConnect'
-import { boostHubBaseUrl } from '../../lib/consts'
-import { usingElectron } from '../../lib/stores/electron'
-import { openNew } from '../../lib/utils/platform'
-import { usePage } from '../../lib/stores/pageStore'
+import React from 'react'
 import SettingTabContent from '../../../design/components/organisms/Settings/atoms/SettingTabContent'
-import Button, { LoadingButton } from '../../../design/components/atoms/Button'
-import { useI18n } from '../../lib/hooks/useI18n'
-import { lngKeys } from '../../lib/i18n/types'
-import { useTeamIntegrations } from '../../../design/lib/stores/integrations'
-import styled from '../../../design/lib/styled'
+import IntegrationManager from './IntegrationManager'
 
 const SlackIntegration = () => {
-  const integrationState = useTeamIntegrations()
-  const { team } = usePage()
-  const { translate } = useI18n()
-
-  const addIntegration = useCallback(
-    (integration: Integration) => {
-      if (
-        integrationState.type !== 'initialising' &&
-        integration.type === 'team'
-      ) {
-        integrationState.actions.addIntegration(integration.integration)
-      }
-    },
-    [integrationState]
-  )
-
-  const slackIntegrations = useMemo(() => {
-    if (integrationState.type === 'initialising') {
-      return []
-    }
-
-    return integrationState.integrations.filter(
-      (integration) => integration.service === 'slack:team'
-    )
-  }, [integrationState])
-
   return (
     <SettingTabContent
       title='Slack'
       body={
-        <StyledGithubIntegration>
-          <div className='integration__description'>
-            <h3>How does it work?</h3>
-            <p>Show Boost Note document preview in Slack</p>
-          </div>
-          <div className='integration__content'>
-            <div className='integration__connect'>
-              <div className='integration__connect__info'>
-                <img src='/app/static/logos/slack.png' alt='GitHub' />
-                <p>Connect Boost Note with Slack</p>
-              </div>
-              {(integrationState.type === 'initialising' ||
-                integrationState.type === 'working') && (
-                <LoadingButton
-                  spinning={true}
-                  variant='secondary'
-                  className='item-btn'
-                />
-              )}
-              {integrationState.type === 'initialised' &&
-                (usingElectron ? (
-                  <Button
-                    variant='secondary'
-                    onClick={() => {
-                      openNew(`${boostHubBaseUrl}/${team?.domain}`)
-                    }}
-                  >
-                    {translate(lngKeys.ExternalEntityOpenInBrowser)}
-                  </Button>
-                ) : (
-                  <ServiceConnect
-                    variant='secondary'
-                    className='item-btn'
-                    service='slack:team'
-                    team={team}
-                    onConnect={addIntegration}
-                  >
-                    {translate(lngKeys.GeneralAddVerb)}
-                  </ServiceConnect>
-                ))}
-            </div>
-            {integrationState.type !== 'initialising' && (
-              <>
-                {slackIntegrations.length > 0 && <h3>Connected Teams:</h3>}
-                {slackIntegrations.map((integration) => (
-                  <div className='integration__list__item' key={integration.id}>
-                    <h3>{integration.name}</h3>
-
-                    <Button
-                      variant='danger'
-                      onClick={() => {
-                        integrationState.actions.removeIntegration(integration)
-                      }}
-                    >
-                      {translate(lngKeys.GeneralRemoveVerb)}
-                    </Button>
-                  </div>
-                ))}
-              </>
-            )}
-          </div>
-        </StyledGithubIntegration>
+        <IntegrationManager
+          service='slack:team'
+          name='Slack'
+          icon='/app/static/logos/slack.png'
+        >
+          <h3>How does it work?</h3>
+          <p>Show Boost Note document preview in Slack</p>
+        </IntegrationManager>
       }
     />
   )
 }
 
-const StyledGithubIntegration = styled.div`
-  & .integration__content {
-    padding: ${({ theme }) => theme.sizes.spaces.sm}px;
-    background-color: ${({ theme }) => theme.colors.background.primary};
-    border: 1px solid ${({ theme }) => theme.colors.border.main};
-  }
-
-  & .integration__list__item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-left: ${({ theme }) => theme.sizes.spaces.sm}px;
-  }
-
-  & .integration__connect {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    & .integration__connect__info {
-      display: flex;
-      align-items: center;
-    }
-    img {
-      height: 30px;
-      margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
-    }
-
-    p {
-      margin: 0;
-    }
-  }
-
-  & .integration__connect__meta {
-    display: flex;
-    justify-content: flex-end;
-    font-size: ${({ theme }) => theme.sizes.fonts.sm}px;
-    margin-top: ${({ theme }) => theme.sizes.spaces.xsm}px;
-    color: ${({ theme }) => theme.colors.text.subtle};
-    a {
-      color: ${({ theme }) => theme.colors.text.link};
-      text-decoration: underline;
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-      }
-    }
-  }
-
-  .integration__description {
-    padding: ${({ theme }) => theme.sizes.spaces.df}px 0;
-
-    h3 {
-      margin-top: 0;
-    }
-
-    p {
-      color: ${({ theme }) => theme.colors.text.subtle};
-    }
-  }
-`
-
 export default SlackIntegration
diff --git a/src/design/components/organisms/Sidebar/atoms/SidebarButton.tsx b/src/design/components/organisms/Sidebar/atoms/SidebarButton.tsx
index 3bdaab06cd..43adeee97d 100644
--- a/src/design/components/organisms/Sidebar/atoms/SidebarButton.tsx
+++ b/src/design/components/organisms/Sidebar/atoms/SidebarButton.tsx
@@ -15,7 +15,7 @@ export interface SidebarButtonProps {
   id: string
   label: string | React.ReactNode
   labelHref?: string
-  labelClick?: () => void
+  labelClick?: React.MouseEventHandler
   pastille?: string | number
   contextControls?: MenuItem[]
   active?: boolean
@@ -51,7 +51,7 @@ const SidebarButton: AppComponent<SidebarButtonProps> = ({
         return
       }
       event.preventDefault()
-      labelClick()
+      labelClick(event)
     },
     [labelClick]
   )

From 5792b4f5ce25f192f1c1042859ca50662e25c823 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:11:04 +0900
Subject: [PATCH 008/106] Embed Block View & Form

---
 .../components/Blocks/forms/EmbedForm.tsx     | 77 +++++++++++++++++++
 src/cloud/components/Blocks/views/Embed.tsx   | 28 +++++++
 2 files changed, 105 insertions(+)
 create mode 100644 src/cloud/components/Blocks/forms/EmbedForm.tsx
 create mode 100644 src/cloud/components/Blocks/views/Embed.tsx

diff --git a/src/cloud/components/Blocks/forms/EmbedForm.tsx b/src/cloud/components/Blocks/forms/EmbedForm.tsx
new file mode 100644
index 0000000000..87f6460c26
--- /dev/null
+++ b/src/cloud/components/Blocks/forms/EmbedForm.tsx
@@ -0,0 +1,77 @@
+import React, { useRef, useState, useCallback } from 'react'
+import { useEffectOnce } from 'react-use'
+import Form from '../../../../design/components/molecules/Form'
+import { Block } from '../../../api/blocks'
+import { useI18n } from '../../../lib/hooks/useI18n'
+import { lngKeys } from '../../../lib/i18n/types'
+
+interface EmbedFormProps {
+  onSubmit: (block: Omit<Block<'embed', { url: string }>, 'id'>) => Promise<any>
+}
+const EmbedForm = ({ onSubmit }: EmbedFormProps) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [name, setName] = useState('')
+  const [url, setUrl] = useState('')
+  const [inputDisabled, setInputDisabled] = useState(false)
+  const { translate } = useI18n()
+
+  const submit = useCallback(async () => {
+    try {
+      setInputDisabled(true)
+      await onSubmit({
+        name,
+        type: 'embed',
+        children: [],
+        data: { url },
+      })
+    } finally {
+      setInputDisabled(false)
+    }
+  }, [onSubmit, name, url])
+
+  useEffectOnce(() => {
+    if (inputRef.current != null && !inputDisabled) {
+      inputRef.current.focus()
+    }
+  })
+
+  return (
+    <Form
+      fullWidth={true}
+      rows={[
+        {
+          title: 'Name',
+          items: [
+            {
+              type: 'input',
+              props: {
+                disabled: inputDisabled,
+                placeholder: '',
+                name,
+                onChange: (event) => setName(event.target.value),
+              },
+            },
+          ],
+        },
+        {
+          title: 'Embed URL',
+          items: [
+            {
+              type: 'input',
+              props: {
+                disabled: inputDisabled,
+                placeholder: '',
+                name,
+                onChange: (event) => setUrl(event.target.value),
+              },
+            },
+          ],
+        },
+      ]}
+      submitButton={{ label: translate(lngKeys.GeneralCreate) }}
+      onSubmit={submit}
+    />
+  )
+}
+
+export default EmbedForm
diff --git a/src/cloud/components/Blocks/views/Embed.tsx b/src/cloud/components/Blocks/views/Embed.tsx
new file mode 100644
index 0000000000..81541919c8
--- /dev/null
+++ b/src/cloud/components/Blocks/views/Embed.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { ViewProps } from '../BlockContent'
+import { EmbedBlock } from '../../../../api/blocks'
+import styled from '../../../../lib/styled'
+
+const EmbedView = ({ block }: ViewProps<EmbedBlock>) => {
+  return (
+    <StyledEmbedView>
+      <iframe src={block.data.url} allowFullScreen={true}></iframe>
+    </StyledEmbedView>
+  )
+}
+
+const StyledEmbedView = styled.div`
+  width: 100%;
+  position: relative;
+  padding-top: 56.25%;
+
+  & iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+`
+
+export default EmbedView

From 1081798a7bad55bb716d717519e83bf51667581f Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:11:41 +0900
Subject: [PATCH 009/106] Markdown Block View & Form

---
 .../components/Blocks/forms/MarkdownForm.tsx  | 60 +++++++++++++
 .../components/Blocks/views/Markdown.tsx      | 89 +++++++++++++++++++
 2 files changed, 149 insertions(+)
 create mode 100644 src/cloud/components/Blocks/forms/MarkdownForm.tsx
 create mode 100644 src/cloud/components/Blocks/views/Markdown.tsx

diff --git a/src/cloud/components/Blocks/forms/MarkdownForm.tsx b/src/cloud/components/Blocks/forms/MarkdownForm.tsx
new file mode 100644
index 0000000000..4f70849994
--- /dev/null
+++ b/src/cloud/components/Blocks/forms/MarkdownForm.tsx
@@ -0,0 +1,60 @@
+import React, { useRef, useState, useCallback } from 'react'
+import { useEffectOnce } from 'react-use'
+import Form from '../../../../design/components/molecules/Form'
+import { MarkdownBlock } from '../../../api/blocks'
+import { useI18n } from '../../../lib/hooks/useI18n'
+import { lngKeys } from '../../../lib/i18n/types'
+import { FormProps } from '../BlockContent'
+
+const MarkdownForm = ({ onSubmit }: FormProps<MarkdownBlock>) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [value, setValue] = useState('')
+  const [inputDisabled, setInputDisabled] = useState(false)
+  const { translate } = useI18n()
+
+  const submit = useCallback(async () => {
+    try {
+      setInputDisabled(true)
+      await onSubmit({
+        name: value,
+        type: 'markdown',
+        children: [],
+        data: null,
+      })
+    } finally {
+      setInputDisabled(false)
+    }
+  }, [onSubmit, value])
+
+  useEffectOnce(() => {
+    if (inputRef.current != null && !inputDisabled) {
+      inputRef.current.focus()
+    }
+  })
+
+  return (
+    <Form
+      fullWidth={true}
+      rows={[
+        {
+          title: 'Name',
+          items: [
+            {
+              type: 'input',
+              props: {
+                disabled: inputDisabled,
+                placeholder: '',
+                value,
+                onChange: (event) => setValue(event.target.value),
+              },
+            },
+          ],
+        },
+      ]}
+      submitButton={{ label: translate(lngKeys.GeneralCreate) }}
+      onSubmit={submit}
+    />
+  )
+}
+
+export default MarkdownForm
diff --git a/src/cloud/components/Blocks/views/Markdown.tsx b/src/cloud/components/Blocks/views/Markdown.tsx
new file mode 100644
index 0000000000..46eff4a23e
--- /dev/null
+++ b/src/cloud/components/Blocks/views/Markdown.tsx
@@ -0,0 +1,89 @@
+import React, { useState, useMemo, useCallback, useRef } from 'react'
+import styled from '../../../../design/lib/styled'
+import { MarkdownBlock } from '../../../api/blocks'
+import CodeMirrorEditor from '../../../lib/editor/components/CodeMirrorEditor'
+import { CodeMirrorKeyMap, useSettings } from '../../../lib/stores/settings'
+import { ViewProps } from '../BlockContent'
+import MarkdownPreview from '../../MarkdownView'
+
+const MarkdownView = ({ block }: ViewProps<MarkdownBlock>) => {
+  const [mode, setMode] = useState<'editor' | 'view'>()
+  const [editorContent, setEditorContent] = useState('')
+  const editorRef = useRef<CodeMirror.Editor | null>(null)
+  const { settings } = useSettings()
+  const editorConfig: CodeMirror.EditorConfiguration = useMemo(() => {
+    const editorTheme = settings['general.editorTheme']
+    const theme =
+      editorTheme == null || editorTheme === 'default'
+        ? settings['general.theme'] === 'light'
+          ? 'default'
+          : 'material-darker'
+        : editorTheme === 'solarized-dark'
+        ? 'solarized dark'
+        : editorTheme
+    const keyMap = resolveKeyMap(settings['general.editorKeyMap'])
+    const editorIndentType = settings['general.editorIndentType']
+    const editorIndentSize = settings['general.editorIndentSize']
+
+    return {
+      mode: 'markdown',
+      lineNumbers: true,
+      lineWrapping: true,
+      theme,
+      indentWithTabs: editorIndentType === 'tab',
+      indentUnit: editorIndentSize,
+      tabSize: editorIndentSize,
+      keyMap,
+      extraKeys: {
+        Enter: 'newlineAndIndentContinueMarkdownList',
+        Tab: 'indentMore',
+      },
+    }
+  }, [settings])
+
+  const bindCallback = useCallback((editor: CodeMirror.Editor) => {
+    setEditorContent(editor.getValue())
+    editorRef.current = editor
+    editorRef.current.on('blue', () => setMode('view'))
+  }, [])
+
+  return (
+    <StyledMarkdownView className={`block__markdown--mode-${mode}`}>
+      <CodeMirrorEditor bind={bindCallback} config={editorConfig} />
+      <div
+        onClick={() => setMode('editor')}
+        className='block__markdown--preview'
+      >
+        <MarkdownPreview content={editorContent} />
+      </div>
+    </StyledMarkdownView>
+  )
+}
+
+const StyledMarkdownView = styled.div`
+  position: relative;
+  & > .block__markdown--preview {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &.block__markdown--mode-editor {
+    & > .block__markdown--preview {
+      display: none;
+    }
+  }
+`
+
+function resolveKeyMap(keyMap: CodeMirrorKeyMap) {
+  switch (keyMap) {
+    case 'vim':
+      return 'vim'
+    case 'default':
+    default:
+      return 'sublime'
+  }
+}
+export default MarkdownView

From e0a2714cba300b13cd49929b7516ff7e2b31a13d Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:11:58 +0900
Subject: [PATCH 010/106] GithubIssue Block View & Form

---
 .../Blocks/forms/GithubIssueForm.tsx          | 435 ++++++++++++++++++
 .../components/Blocks/views/GithubIssue.tsx   |  83 ++++
 2 files changed, 518 insertions(+)
 create mode 100644 src/cloud/components/Blocks/forms/GithubIssueForm.tsx
 create mode 100644 src/cloud/components/Blocks/views/GithubIssue.tsx

diff --git a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
new file mode 100644
index 0000000000..c8692e155e
--- /dev/null
+++ b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
@@ -0,0 +1,435 @@
+import { mdiGithub } from '@mdi/js'
+import React, {
+  useMemo,
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  ChangeEventHandler,
+} from 'react'
+import { FormSelect } from '../../../../components/atoms/form'
+import Button from '../../../../design/components/atoms/Button'
+import Icon from '../../../../design/components/atoms/Icon'
+import Spinner from '../../../../design/components/atoms/Spinner'
+import FormInput from '../../../../design/components/molecules/Form/atoms/FormInput'
+import FormRow from '../../../../design/components/molecules/Form/templates/FormRow'
+import FormRowItem from '../../../../design/components/molecules/Form/templates/FormRowItem'
+import { useTeamIntegrations } from '../../../../design/lib/stores/integrations'
+import { useToast } from '../../../../design/lib/stores/toast'
+import styled from '../../../../design/lib/styled'
+import { GithubIssueBlock } from '../../../api/blocks'
+import { getAction, IntegrationActionTypes } from '../../../api/integrations'
+import { SerializedTeamIntegration } from '../../../interfaces/db/connections'
+import { FormProps } from '../BlockContent'
+
+type State =
+  | { stage: 'initialising' }
+  | { stage: 'integrate' }
+  | { stage: 'issue_select'; integrations: SerializedTeamIntegration[] }
+
+const GithubIssueForm = ({ onSubmit }: FormProps<GithubIssueBlock>) => {
+  const integrationState = useTeamIntegrations()
+  const [state, setState] = useState<State>({ stage: 'initialising' })
+
+  useEffect(() => {
+    if (integrationState.type === 'initialising') {
+      setState({ stage: 'initialising' })
+      return
+    }
+    const githubIntegrations = integrationState.integrations.filter(
+      (integration) => integration.service === 'github:team'
+    )
+
+    if (githubIntegrations.length === 0) {
+      setState({ stage: 'integrate' })
+      return
+    }
+
+    setState({ stage: 'issue_select', integrations: githubIntegrations })
+  }, [integrationState])
+
+  const runImport = useCallback(
+    async (issues: Issue[]) => {
+      for (const issue of issues) {
+        await onSubmit({
+          type: 'github.issue',
+          name: issue.title,
+          data: issue,
+          children: [],
+        })
+      }
+    },
+    [onSubmit]
+  )
+
+  return (
+    <GithubIssueFormLayout>
+      {(() => {
+        switch (state.stage) {
+          case 'initialising':
+            return <Spinner />
+          case 'integrate':
+            return <div>Please Integrate</div>
+          case 'issue_select':
+            return (
+              <GithubIssueSelector
+                integrations={state.integrations}
+                onImport={runImport}
+              />
+            )
+        }
+      })()}
+    </GithubIssueFormLayout>
+  )
+}
+
+interface GithubIssueSelectorProps {
+  integrations: SerializedTeamIntegration[]
+  onImport: (issues: Record<string, any>[]) => Promise<void>
+}
+
+type Org = IntegrationActionTypes['orgs:list'][number]
+type Repo = IntegrationActionTypes['org:repos'][number]
+type Issue = IntegrationActionTypes['repo:issues'][number]
+
+const GithubIssueSelector = ({
+  integrations,
+  onImport,
+}: GithubIssueSelectorProps) => {
+  const [currentIntegration, setCurrentIntegration] = useState(integrations[0])
+  const [organisations, setOrganisations] = useState<Org[]>([])
+  const [currentOrg, setCurrentOrg] = useState<Org | null>(null)
+  const [repos, setRepos] = useState<Repo[]>([])
+  const [currentRepo, setCurrentRepo] = useState<Repo | null>(null)
+  const [issues, setIssues] = useState<Issue[]>([])
+  const [selectedIssues, setSelectedIssues] = useState<Set<Issue>>(new Set())
+  const [isLoading, setIsLoading] = useState(false)
+  const [search, setSearch] = useState('')
+  const { pushApiErrorMessage } = useToast()
+
+  const errorHandleRef = useRef(pushApiErrorMessage)
+  useEffect(() => {
+    errorHandleRef.current = pushApiErrorMessage
+  }, [pushApiErrorMessage])
+
+  const integrationRef = useRef(currentIntegration)
+  useEffect(() => {
+    integrationRef.current = currentIntegration
+  }, [currentIntegration])
+
+  useEffect(() => {
+    setOrganisations([])
+    setCurrentOrg(null)
+    setIsLoading(true)
+    getAction(currentIntegration, 'orgs:list')
+      .then((orgs) => {
+        setOrganisations(orgs)
+        setCurrentOrg(orgs[0] || null)
+      })
+      .finally(() => setIsLoading(false))
+      .catch(errorHandleRef.current)
+  }, [currentIntegration])
+
+  useEffect(() => {
+    setRepos([])
+    setCurrentRepo(null)
+    if (currentOrg != null) {
+      setIsLoading(true)
+      getAction(integrationRef.current, 'org:repos', { org: currentOrg.login })
+        .then((repos) => {
+          setRepos(repos)
+          setCurrentRepo(repos[0] || null)
+        })
+        .finally(() => setIsLoading(false))
+        .catch(errorHandleRef.current)
+    }
+  }, [currentOrg])
+
+  useEffect(() => {
+    setIssues([])
+    setSelectedIssues(new Set())
+    if (currentRepo != null) {
+      setIsLoading(true)
+      getAction(integrationRef.current, 'repo:issues', {
+        owner: currentRepo.owner.login,
+        repo: currentRepo.name,
+      })
+        .then(setIssues)
+        .finally(() => setIsLoading(false))
+        .catch(errorHandleRef.current)
+      setIsLoading(false)
+    }
+  }, [currentRepo])
+
+  const setIntegration = useCallback(
+    ({ value }) => {
+      const integration = integrations.find(({ id }) => id === value)
+      if (integration != null) {
+        setCurrentIntegration(integration)
+      }
+    },
+    [integrations]
+  )
+
+  const setOrg = useCallback(
+    ({ value }) => {
+      const org = organisations.find(({ id }) => id === value)
+      if (org) {
+        setCurrentOrg(org)
+      }
+    },
+    [organisations]
+  )
+
+  const setRepo = useCallback(
+    ({ value }) => {
+      const repo = repos.find(({ id }) => id === value)
+      if (repo) {
+        setCurrentRepo(repo)
+      }
+    },
+    [repos]
+  )
+
+  const integrationOptions = useMemo(() => {
+    return integrations.map(({ id, name }) => ({ label: name, value: id }))
+  }, [integrations])
+
+  const organisationOptions = useMemo(() => {
+    return organisations.map(({ id, login }) => ({ label: login, value: id }))
+  }, [organisations])
+
+  const repoOptions = useMemo(() => {
+    return repos.map(({ id, name }) => ({ label: name, value: id }))
+  }, [repos])
+
+  const filteredIssues: Issue[] = useMemo(() => {
+    const lower = search.toLowerCase()
+    return search === ''
+      ? issues
+      : issues.filter(
+          (issue) =>
+            issue.title.toLowerCase().includes(lower) ||
+            selectedIssues.has(issue)
+        )
+  }, [issues, search, selectedIssues])
+
+  const toggleAll: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    (ev) => {
+      if (ev.target.checked) {
+        setSelectedIssues(new Set(issues))
+      } else {
+        setSelectedIssues(new Set())
+      }
+    },
+    [issues]
+  )
+
+  const createToggleSelect = useCallback(
+    (issue: Issue): ChangeEventHandler<HTMLInputElement> => {
+      return (ev) => {
+        const checked = ev.target.checked
+        setSelectedIssues((old) => {
+          if (checked) {
+            old.add(issue)
+          } else {
+            old.delete(issue)
+          }
+          return new Set(old)
+        })
+      }
+    },
+    []
+  )
+  const runImport = useCallback(async () => {
+    try {
+      setIsLoading(true)
+      await onImport(Array.from(selectedIssues.values()))
+    } finally {
+      setIsLoading(false)
+    }
+  }, [selectedIssues, onImport])
+
+  return (
+    <div className='github-issue__form__importer'>
+      <FormRow fullWidth={true}>
+        <FormRowItem>
+          <FormSelect
+            value={{
+              label: currentIntegration.name,
+              value: currentIntegration.id,
+            }}
+            isDisabled={isLoading}
+            options={integrationOptions}
+            onChange={setIntegration}
+          />
+        </FormRowItem>
+        <FormRowItem>
+          <FormSelect
+            value={
+              currentOrg != null
+                ? {
+                    label: currentOrg.login,
+                    value: currentOrg.id,
+                  }
+                : undefined
+            }
+            isLoading={isLoading}
+            options={organisationOptions}
+            onChange={setOrg}
+          />
+        </FormRowItem>
+        <FormRowItem>
+          <FormSelect
+            value={
+              currentRepo != null
+                ? {
+                    label: currentRepo.name,
+                    value: currentRepo.id,
+                  }
+                : undefined
+            }
+            isLoading={isLoading}
+            options={repoOptions}
+            onChange={setRepo}
+          />
+        </FormRowItem>
+        <FormRowItem>
+          <FormInput
+            placeholder='Search'
+            value={search}
+            onChange={(ev) => setSearch(ev.target.value)}
+          />
+        </FormRowItem>
+      </FormRow>
+      <div className='github-issue__form__table'>
+        <table>
+          <thead>
+            <tr>
+              <td>
+                <input
+                  type='checkbox'
+                  onChange={toggleAll}
+                  checked={filteredIssues.length === selectedIssues.size}
+                />{' '}
+                Title
+              </td>
+              <td>Assignees</td>
+              <td>Status</td>
+              <td>Labels</td>
+              <td>LinkedPR</td>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredIssues.map((issue) => (
+              <tr key={issue.id}>
+                <td>
+                  <input
+                    type='checkbox'
+                    checked={selectedIssues.has(issue)}
+                    onChange={createToggleSelect(issue)}
+                  />
+                  <span>{issue.title}</span>
+                </td>
+                <td>
+                  {issue.assignees
+                    .map((assignee: any) => assignee.login)
+                    .join(', ')}
+                </td>
+                <td>{issue.status}</td>
+                <td>
+                  {issue.labels.map((label: any) => label.name).join(', ')}
+                </td>
+                <td>
+                  {issue.pull_request != null && issue.pull_request.html_url}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className='github-issue__form__action'>
+        <Button
+          onClick={runImport}
+          disabled={selectedIssues.size === 0}
+          variant='primary'
+        >
+          Import{' '}
+          {selectedIssues.size > 0 && <span>({selectedIssues.size})</span>}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+const GithubIssueFormLayout = (props: React.PropsWithChildren<{}>) => {
+  return (
+    <StyledGithubIssueForm>
+      <h2 className='github-issue__form____title'>
+        <Icon path={mdiGithub} size={20} /> GitHub
+      </h2>
+      <div className='github-issue__form__content'>{props.children}</div>
+    </StyledGithubIssueForm>
+  )
+}
+
+const StyledGithubIssueForm = styled.div`
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+
+  & .github-issue__form__title {
+    display: flex;
+    align-items: center;
+    font-size: ${({ theme }) => theme.sizes.fonts.md}px;
+    margin: 0;
+    margin-bottom: ${({ theme }) => theme.sizes.spaces.md}px;
+    padding: ${({ theme }) => theme.sizes.spaces.df}px 0;
+    svg {
+      margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
+    }
+  }
+
+  & .github-issue__form__content {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+
+  & .github-issue__form__importer {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  & .github-issue__form__table {
+    flex-grow: 1;
+    overflow: auto;
+  }
+
+  & .github-issue__form__action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ${({ theme }) => theme.sizes.spaces.md}px 0;
+    border-top: 1px solid ${({ theme }) => theme.colors.border.second};
+  }
+
+  & table {
+    width: 100%;
+    text-align: left;
+    border-collapse: collapse;
+    margin-top: ${({ theme }) => theme.sizes.spaces.md}px;
+  }
+
+  & td,
+  th {
+    border: 1px solid ${({ theme }) => theme.colors.border.main};
+    padding: ${({ theme }) => theme.sizes.spaces.sm}px;
+  }
+
+  & .block__table__view__import {
+    border-bottom: 1px solid ${({ theme }) => theme.colors.border.main};
+  }
+`
+
+export default GithubIssueForm
diff --git a/src/cloud/components/Blocks/views/GithubIssue.tsx b/src/cloud/components/Blocks/views/GithubIssue.tsx
new file mode 100644
index 0000000000..2e25994dce
--- /dev/null
+++ b/src/cloud/components/Blocks/views/GithubIssue.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import { ViewProps } from '../BlockContent'
+import { mdiLinkBoxOutline } from '@mdi/js'
+import styled from '../../../../design/lib/styled'
+import Icon from '../../../../design/components/atoms/Icon'
+import { GithubIssueBlock } from '../../../api/blocks'
+
+const GithubIssueView = ({ block }: ViewProps<GithubIssueBlock>) => {
+  return (
+    <StyledGithubIssueView>
+      <h1>{block.data.title}</h1>
+      <div className='github-issue__view__info'>
+        <div>
+          <div>Issue number</div>
+          <div>
+            <a href={block.data.html_url}>
+              <div>
+                <span>#{block.data.number}</span>
+                <Icon path={mdiLinkBoxOutline} />
+              </div>
+            </a>
+          </div>
+        </div>
+        <div>
+          <div>Assignees</div>
+          <div>
+            {block.data.assignees
+              .map((assignee: any) => assignee.login)
+              .join(', ')}
+          </div>
+        </div>
+        <div>
+          <div>Status</div>
+          <div>{block.data.status}</div>
+        </div>
+        <div>
+          <div>Labels</div>
+          <div>
+            {block.data.labels.map((label: any) => label.name).join(', ')}
+          </div>
+        </div>
+        <div>
+          <div>Linked PR</div>
+          <div>
+            <a
+              href={
+                block.data.pull_request != null
+                  ? block.data.pull_request.html_url
+                  : '#'
+              }
+            >
+              #
+              {block.data.pull_request != null
+                ? block.data.pull_request.number
+                : ''}
+            </a>
+          </div>
+        </div>
+      </div>
+    </StyledGithubIssueView>
+  )
+}
+
+const StyledGithubIssueView = styled.div`
+  .github-issue__view__info {
+    & > div {
+      display: flex;
+      align-items: center;
+      padding: ${({ theme }) => theme.sizes.spaces.sm}px 0;
+      & > div:first-child {
+        width: 100px;
+        color: ${({ theme }) => theme.colors.text.subtle};
+      }
+    }
+
+    & a {
+      color: ${({ theme }) => theme.colors.text.primary};
+      text-decoration: none;
+    }
+  }
+`
+
+export default GithubIssueView

From 1120f31ed6cbaa11ce46a9cbdefe71aa8a8a1e98 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:12:19 +0900
Subject: [PATCH 011/106] Table Block View & Form

---
 .../components/Blocks/forms/TableForm.tsx     | 60 +++++++++++++
 src/cloud/components/Blocks/views/Table.tsx   | 88 +++++++++++++++++++
 2 files changed, 148 insertions(+)
 create mode 100644 src/cloud/components/Blocks/forms/TableForm.tsx
 create mode 100644 src/cloud/components/Blocks/views/Table.tsx

diff --git a/src/cloud/components/Blocks/forms/TableForm.tsx b/src/cloud/components/Blocks/forms/TableForm.tsx
new file mode 100644
index 0000000000..dc8fad3dfa
--- /dev/null
+++ b/src/cloud/components/Blocks/forms/TableForm.tsx
@@ -0,0 +1,60 @@
+import React, { useRef, useState, useCallback } from 'react'
+import { useEffectOnce } from 'react-use'
+import Form from '../../../../design/components/molecules/Form'
+import { TableBlock } from '../../../api/blocks'
+import { useI18n } from '../../../lib/hooks/useI18n'
+import { lngKeys } from '../../../lib/i18n/types'
+import { FormProps } from '../BlockContent'
+
+const TableForm = ({ onSubmit }: FormProps<TableBlock>) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [value, setValue] = useState('')
+  const [inputDisabled, setInputDisabled] = useState(false)
+  const { translate } = useI18n()
+
+  const submit = useCallback(async () => {
+    try {
+      setInputDisabled(true)
+      await onSubmit({
+        name: value,
+        type: 'table',
+        children: [],
+        data: { columns: {} },
+      })
+    } finally {
+      setInputDisabled(false)
+    }
+  }, [onSubmit, value])
+
+  useEffectOnce(() => {
+    if (inputRef.current != null && !inputDisabled) {
+      inputRef.current.focus()
+    }
+  })
+
+  return (
+    <Form
+      fullWidth={true}
+      rows={[
+        {
+          title: 'Name',
+          items: [
+            {
+              type: 'input',
+              props: {
+                disabled: inputDisabled,
+                placeholder: '',
+                value,
+                onChange: (event) => setValue(event.target.value),
+              },
+            },
+          ],
+        },
+      ]}
+      submitButton={{ label: translate(lngKeys.GeneralCreate) }}
+      onSubmit={submit}
+    />
+  )
+}
+
+export default TableForm
diff --git a/src/cloud/components/Blocks/views/Table.tsx b/src/cloud/components/Blocks/views/Table.tsx
new file mode 100644
index 0000000000..c66ee881f7
--- /dev/null
+++ b/src/cloud/components/Blocks/views/Table.tsx
@@ -0,0 +1,88 @@
+import React, { useCallback } from 'react'
+import { ViewProps } from '../BlockContent'
+import { mdiPlus } from '@mdi/js'
+import GithubIssueForm from '../forms/GithubIssueForm'
+import { TableBlock } from '../../../api/blocks'
+import { useModal } from '../../../../design/lib/stores/modal'
+import Button from '../../../../design/components/atoms/Button'
+import styled from '../../../../design/lib/styled'
+
+const TableView = ({ block, actions }: ViewProps<TableBlock>) => {
+  const { openModal } = useModal()
+
+  const importIssues = useCallback(() => {
+    openModal(
+      <GithubIssueForm
+        onSubmit={(issueBlock) => {
+          return actions.create(issueBlock, block)
+        }}
+      />,
+      {
+        width: 'large',
+        showCloseIcon: true,
+      }
+    )
+  }, [openModal, actions, block])
+
+  return (
+    <StyledTableView>
+      <table>
+        <thead>
+          <tr>
+            <th>Title</th>
+            <td>Assignees</td>
+            <th>Status</th>
+            <th>Labels</th>
+            <th>Linked PR</th>
+          </tr>
+        </thead>
+        <tbody>
+          {block.children.map(({ data }) => {
+            return (
+              <tr key={data.id}>
+                <td>{data.title}</td>
+                <td>
+                  {data.assignees
+                    .map((assignee: any) => assignee.login)
+                    .join(', ')}
+                </td>
+                <td>{data.state}</td>
+                <td>
+                  {data.labels.map((label: any) => label.name).join(', ')}
+                </td>
+                <td>
+                  {data.pull_request != null && data.pull_request.html_url}
+                </td>
+              </tr>
+            )
+          })}
+        </tbody>
+      </table>
+      <div className='block__table__view__import'>
+        <Button onClick={importIssues} variant='transparent' iconPath={mdiPlus}>
+          Import
+        </Button>
+      </div>
+    </StyledTableView>
+  )
+}
+
+const StyledTableView = styled.div`
+  & table {
+    width: 100%;
+    text-align: left;
+    border-collapse: collapse;
+  }
+
+  & td,
+  th {
+    border: 1px solid ${({ theme }) => theme.colors.border.main};
+    padding: ${({ theme }) => theme.sizes.spaces.sm}px;
+  }
+
+  & .block__table__view__import {
+    border-bottom: 1px solid ${({ theme }) => theme.colors.border.main};
+  }
+`
+
+export default TableView

From b899076ac97360d7744050bbe18f5d26a6c6f4de Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:12:40 +0900
Subject: [PATCH 012/106] Container Block View & Form

---
 .../components/Blocks/forms/ContainerForm.tsx |  60 +++++++
 .../components/Blocks/views/Container.tsx     | 160 ++++++++++++++++++
 2 files changed, 220 insertions(+)
 create mode 100644 src/cloud/components/Blocks/forms/ContainerForm.tsx
 create mode 100644 src/cloud/components/Blocks/views/Container.tsx

diff --git a/src/cloud/components/Blocks/forms/ContainerForm.tsx b/src/cloud/components/Blocks/forms/ContainerForm.tsx
new file mode 100644
index 0000000000..e3110ace1c
--- /dev/null
+++ b/src/cloud/components/Blocks/forms/ContainerForm.tsx
@@ -0,0 +1,60 @@
+import React, { useRef, useState, useCallback } from 'react'
+import { useI18n } from '../../../../lib/hooks/useI18n'
+import { useEffectOnce } from 'react-use'
+import Form from '../../../../../shared/components/molecules/Form'
+import { lngKeys } from '../../../../lib/i18n/types'
+import { FormProps } from '../BlockContent'
+import { ContainerBlock } from '../../../../api/blocks'
+
+const ContainerForm = ({ onSubmit }: FormProps<ContainerBlock>) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [value, setValue] = useState('')
+  const [inputDisabled, setInputDisabled] = useState(false)
+  const { translate } = useI18n()
+
+  const submit = useCallback(async () => {
+    try {
+      setInputDisabled(true)
+      await onSubmit({
+        name: 'container',
+        type: 'container',
+        children: [],
+        data: null,
+      })
+    } finally {
+      setInputDisabled(false)
+    }
+  }, [onSubmit])
+
+  useEffectOnce(() => {
+    if (inputRef.current != null && !inputDisabled) {
+      inputRef.current.focus()
+    }
+  })
+
+  return (
+    <Form
+      fullWidth={true}
+      rows={[
+        {
+          title: 'Name',
+          items: [
+            {
+              type: 'input',
+              props: {
+                disabled: inputDisabled,
+                placeholder: '',
+                value,
+                onChange: (event) => setValue(event.target.value),
+              },
+            },
+          ],
+        },
+      ]}
+      submitButton={{ label: translate(lngKeys.GeneralCreate) }}
+      onSubmit={submit}
+    />
+  )
+}
+
+export default ContainerForm
diff --git a/src/cloud/components/Blocks/views/Container.tsx b/src/cloud/components/Blocks/views/Container.tsx
new file mode 100644
index 0000000000..eafe9cd10e
--- /dev/null
+++ b/src/cloud/components/Blocks/views/Container.tsx
@@ -0,0 +1,160 @@
+import React, { useState, useCallback, useMemo } from 'react'
+import { ViewProps } from '../BlockContent'
+import EmbedView from './Embed'
+import MarkdownView from './Markdown'
+import TableView from './Table'
+import {
+  mdiPlusBoxOutline,
+  mdiFileDocumentOutline,
+  mdiTable,
+  mdiCodeTags,
+} from '@mdi/js'
+import MarkdownForm from '../forms/MarkdownForm'
+import TableForm from '../forms/TableForm'
+import EmbedForm from '../forms/EmbedForm'
+import { Block, ContainerBlock } from '../../../api/blocks'
+import { useModal } from '../../../../design/lib/stores/modal'
+import Icon from '../../../../design/components/atoms/Icon'
+import styled from '../../../../design/lib/styled'
+
+interface ContainerViewProps extends ViewProps<ContainerBlock> {
+  hideAdd?: boolean
+}
+
+const ContainerView = ({ block, actions, hideAdd }: ContainerViewProps) => {
+  const { openModal, closeAllModals } = useModal()
+  const [addSelectOpen, setAddSelectOpen] = useState(false)
+
+  const createBlock = useCallback(
+    async (newBlock: Omit<Block, 'id'>) => {
+      await actions.create(newBlock, block)
+      setAddSelectOpen(false)
+      closeAllModals()
+    },
+    [block, actions, closeAllModals]
+  )
+
+  const modalOptions = useMemo(() => {
+    return {
+      showCloseIcon: true,
+      width: 'small' as const,
+      title: 'Create new block',
+    }
+  }, [])
+
+  const createMarkdown = useCallback(() => {
+    openModal(<MarkdownForm onSubmit={createBlock} />, modalOptions)
+  }, [createBlock, openModal, modalOptions])
+
+  const createTable = useCallback(() => {
+    openModal(<TableForm onSubmit={createBlock} />, modalOptions)
+  }, [createBlock, openModal, modalOptions])
+
+  const createEmbed = useCallback(() => {
+    openModal(<EmbedForm onSubmit={createBlock} />, modalOptions)
+  }, [createBlock, openModal, modalOptions])
+
+  return (
+    <StyledContainerView>
+      <div className='block__view__container__content'>
+        {block.children.map((child) => {
+          switch (child.type) {
+            case 'container':
+              return (
+                <ContainerView block={child} actions={actions} hideAdd={true} />
+              )
+            case 'embed':
+              return <EmbedView block={child} actions={actions} />
+            case 'markdown':
+              return <MarkdownView block={child} actions={actions} />
+            case 'table':
+              return <TableView block={child} actions={actions} />
+            default:
+              return (
+                <div>Block of type ${(child as any).type} is unsupported</div>
+              )
+          }
+        })}
+      </div>
+      {!hideAdd && (
+        <div
+          onClick={() => setAddSelectOpen((open) => !open)}
+          className='block__view__container__add'
+        >
+          <Icon path={mdiPlusBoxOutline} size={16} />
+          <span>Add Block</span>
+        </div>
+      )}
+      {addSelectOpen && (
+        <div className='block__view__container__add__select'>
+          <h3>Select a block</h3>
+          <div>
+            <div
+              onClick={createMarkdown}
+              className='block__view__add__selector'
+            >
+              <Icon size={34} path={mdiFileDocumentOutline} />
+              <span>Markdown</span>
+            </div>
+            <div onClick={createTable} className='block__view__add__selector'>
+              <Icon size={34} path={mdiTable} />
+              <span>Table</span>
+            </div>
+            <div onClick={createEmbed} className='block__view__add__selector'>
+              <Icon size={34} path={mdiCodeTags} />
+              <span>Embed</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </StyledContainerView>
+  )
+}
+
+const StyledContainerView = styled.div`
+  width: 100%;
+
+  & .block__view__container__content > * {
+    margin-top: ${({ theme }) => theme.sizes.spaces.md}px;
+  }
+
+  & .block__view__container__add {
+    display: flex;
+    justify-content: center;
+    cursor: pointer;
+
+    border: 1px solid ${({ theme }) => theme.colors.border.main};
+    padding: ${({ theme }) => theme.sizes.spaces.df}px;
+    & span {
+      margin-left: ${({ theme }) => theme.sizes.spaces.df}px;
+    }
+  }
+
+  & .block__view__container__add__select {
+    margin: 0 auto;
+    margin-top: ${({ theme }) => theme.sizes.spaces.df}px;
+    border-radius: 2px;
+    background-color: ${({ theme }) => theme.colors.background.secondary};
+    padding: ${({ theme }) => theme.sizes.spaces.df}px 0;
+    width: 60%;
+    & > h3 {
+      text-align: center;
+      margin-top: 0;
+    }
+    & > div {
+      display: flex;
+      justify-content: space-evenly;
+      & .block__view__add__selector {
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        span {
+          margin-top: ${({ theme }) => theme.sizes.spaces.sm}px;
+        }
+      }
+    }
+  }
+`
+
+export default ContainerView

From 744036439a37d5c7d95126167466be0745eb8d1a Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:12:59 +0900
Subject: [PATCH 013/106] Block Tree Nav

---
 src/cloud/components/Blocks/BlockTree.tsx | 121 ++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 src/cloud/components/Blocks/BlockTree.tsx

diff --git a/src/cloud/components/Blocks/BlockTree.tsx b/src/cloud/components/Blocks/BlockTree.tsx
new file mode 100644
index 0000000000..8d61861e4a
--- /dev/null
+++ b/src/cloud/components/Blocks/BlockTree.tsx
@@ -0,0 +1,121 @@
+import React, { useMemo } from 'react'
+import {
+  mdiCodeTags,
+  mdiTable,
+  mdiFileDocumentOutline,
+  mdiGithub,
+  mdiPackageVariantClosed,
+  mdiTrashCanOutline,
+} from '@mdi/js'
+import { Block } from '../../api/blocks'
+import styled from '../../../design/lib/styled'
+import { capitalize } from '../../lib/utils/string'
+import Icon, { IconSize } from '../../../design/components/atoms/Icon'
+
+interface BlockTreeProps {
+  root: Block
+  onSelect: (block: Block) => void
+  onDelete: (block: Block) => void
+  depth?: number
+}
+
+const BlockTree = ({ root, onSelect, onDelete, depth }: BlockTreeProps) => {
+  return (
+    <StyledBlockTree key={root.id} depth={depth || 0}>
+      <div className='block__tree__label'>
+        <BlockIcon block={root} size={16} />
+        <span onClick={() => onSelect(root)}>{capitalize(root.type)}</span>
+        <span onClick={() => onDelete(root)}>
+          <Icon
+            className='block__tree__action'
+            path={mdiTrashCanOutline}
+            size={16}
+          />
+        </span>
+      </div>
+      <div className='block__tree__children'>
+        {root.children.length > 0 &&
+          (root.children as Block[]).map((child: Block) => (
+            <BlockTree
+              key={child.id}
+              root={child}
+              onSelect={onSelect}
+              onDelete={onDelete}
+              depth={(depth || 0) + 1}
+            />
+          ))}
+      </div>
+    </StyledBlockTree>
+  )
+}
+
+const StyledBlockTree = styled.div<{ depth: number }>`
+  font-size: ${({ theme }) => theme.sizes.fonts.df}px;
+
+  & > .block__tree__label {
+    padding-left: ${({ depth }) => 18 + (depth as number) * 15}px;
+    display: flex;
+    width: 100%;
+    height: 26px;
+    white-space: nowrap;
+    font-size: ${({ theme }) => theme.sizes.fonts.df}px;
+    cursor: pointer;
+
+    align-items: center;
+    flex: 1 1 auto;
+    background: none;
+    outline: 0;
+    border: 0;
+    text-align: left;
+    color: ${({ theme }) => theme.colors.text.secondary};
+    text-decoration: none;
+    margin: 0;
+    overflow: hidden;
+    & > span:first-of-type {
+      flex-grow: 1;
+    }
+    & svg {
+      color: ${({ theme }) => theme.colors.text.subtle};
+      margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
+    }
+
+    & .block__tree__action {
+      display: none;
+    }
+
+    &:hover {
+      background-color: ${({ theme }) => theme.colors.background.secondary};
+
+      & .block__tree__action {
+        display: block;
+      }
+    }
+  }
+`
+
+interface BlockIconProps {
+  block: Block
+  size: IconSize
+}
+
+const BlockIcon = ({ block, size }: BlockIconProps) => {
+  const path = useMemo(() => {
+    if (block.type.startsWith('github')) {
+      return mdiGithub
+    }
+    switch (block.type) {
+      case 'embed':
+        return mdiCodeTags
+      case 'table':
+        return mdiTable
+      case 'markdown':
+        return mdiFileDocumentOutline
+      default:
+        return mdiPackageVariantClosed
+    }
+  }, [block.type])
+
+  return <Icon path={path} size={size} />
+}
+
+export default BlockTree

From 73ebf3bac4e6260305244d4800f05561f54aa294 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:13:20 +0900
Subject: [PATCH 014/106] Block Editor

---
 src/cloud/components/Blocks/BlockContent.tsx  | 270 ++++++++++++++----
 src/cloud/components/Blocks/BlockEditor.tsx   |  19 ++
 .../components/organisms/DocPage/Edit.tsx     |  62 ++++
 3 files changed, 296 insertions(+), 55 deletions(-)
 create mode 100644 src/cloud/components/Blocks/BlockEditor.tsx
 create mode 100644 src/cloud/components/organisms/DocPage/Edit.tsx

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index 58dfefb9cb..e701777666 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -1,73 +1,233 @@
-import React, { useCallback } from 'react'
-import { Block } from '../../api/blocks'
-import { SerializedDoc } from '../../interfaces/db/doc'
-import { useDocBlocks } from '../../lib/hooks/useDocBlocks'
-
-const BlockContent = (doc: SerializedDoc) => {
-  const { state, actions } = useDocBlocks(doc.id)
-
-  const createContainer = useCallback(async () => {
-    if (doc.rootBlock != null) {
-      await actions.create(
-        {
-          name: 'container',
-          type: 'container',
-          children: [],
-          data: null,
-        },
-        doc.rootBlock
-      )
+import React, { useCallback, useState, useMemo } from 'react'
+import {
+  mdiPlus,
+  mdiChevronDown,
+  mdiPackageVariantClosed,
+  mdiCodeTags,
+  mdiTable,
+  mdiFileDocumentOutline,
+  mdiChevronLeft,
+} from '@mdi/js'
+import MarkdownForm from './forms/MarkdownForm'
+import EmbedForm from './forms/EmbedForm'
+import TableForm from './forms/TableForm'
+import TableView from './views/Table'
+import MarkdownView from './views/Markdown'
+import EmbedView from './views/Embed'
+import ContainerView from './views/Container'
+import GithubIssueView from './views/GithubIssue'
+import { Block, ContainerBlock } from '../../api/blocks'
+import { BlockActions, useDocBlocks } from '../../lib/hooks/useDocBlocks'
+import { SerializedDocWithBookmark } from '../../interfaces/db/doc'
+import { useModal } from '../../../design/lib/stores/modal'
+import { useI18n } from '../../lib/hooks/useI18n'
+import { lngKeys } from '../../lib/i18n/types'
+import ContainerForm from './forms/ContainerForm'
+import BlockTree from './BlockTree'
+import Icon from '../../../design/components/atoms/Icon'
+import styled from '../../../design/lib/styled'
+
+export interface ViewProps<T extends Block> {
+  block: T
+  actions: BlockActions
+}
+
+export interface FormProps<T extends Block> {
+  onSubmit: (block: Omit<T, 'id'>) => Promise<any>
+}
+
+interface BlockContentProps {
+  doc: SerializedDocWithBookmark & { rootBlock: ContainerBlock }
+}
+
+const BlockContent = ({ doc }: BlockContentProps) => {
+  const { state, actions } = useDocBlocks(doc.rootBlock.id)
+  const { openModal, closeAllModals } = useModal()
+  const { translate } = useI18n()
+  const [currentBlock, setCurrentBlock] = useState<Block | null>(null)
+  const [showActions, setShowActions] = useState(true)
+
+  const createBlock = useCallback(
+    async (block: Omit<Block, 'id'>) => {
+      await actions.create(block, doc.rootBlock)
+      closeAllModals()
+    },
+    [doc, actions, closeAllModals]
+  )
+
+  const modalOptions = useMemo(() => {
+    return {
+      showCloseIcon: true,
+      title: translate(lngKeys.ModalsCreateNewDocument),
     }
-  }, [doc, actions])
+  }, [translate])
+
+  const createContainer = useCallback(() => {
+    openModal(<ContainerForm onSubmit={createBlock} />, modalOptions)
+  }, [createBlock, openModal, modalOptions])
+
+  const createMarkdown = useCallback(() => {
+    openModal(<MarkdownForm onSubmit={createBlock} />, modalOptions)
+  }, [createBlock, openModal, modalOptions])
+
+  const createTable = useCallback(() => {
+    openModal(<TableForm onSubmit={createBlock} />, modalOptions)
+  }, [createBlock, openModal, modalOptions])
+
+  const createEmbed = useCallback(() => {
+    openModal(<EmbedForm onSubmit={createBlock} />, modalOptions)
+  }, [createBlock, openModal, modalOptions])
+
+  const content = useMemo(() => {
+    if (state.type === 'loading') {
+      return null
+    }
+    const active = currentBlock || state.block
+    switch (active.type) {
+      case 'container':
+        return <ContainerView block={active} actions={actions} />
+      case 'embed':
+        return <EmbedView block={active} actions={actions} />
+      case 'markdown':
+        return <MarkdownView block={active} actions={actions} />
+      case 'table':
+        return <TableView block={active} actions={actions} />
+      case 'github.issue':
+        return <GithubIssueView block={active} actions={actions} />
+      default:
+        return <div>Block of type ${(active as any).type} is unsupported</div>
+    }
+  }, [currentBlock, state, actions])
 
   if (state.type === 'loading') {
     return <div>loading</div>
   }
 
   return (
-    <div>
-      <div>
-        <BlockTree blocks={state.blocks} />
-        <div>
-          <div>New Items</div>
-          <div onClick={createContainer}>Container</div>
-          <div>Table</div>
-          <div>Embed</div>
+    <StyledBlockContent>
+      <div className='block__editor__nav'>
+        <BlockTree
+          root={state.block}
+          onSelect={setCurrentBlock}
+          onDelete={actions.remove}
+        />
+        <div className='block__editor__nav--actions'>
+          <div
+            className='block__editor__nav--item'
+            onClick={() => setShowActions((state) => !state)}
+          >
+            <span>New Items</span>
+            <Icon
+              path={showActions ? mdiChevronDown : mdiChevronLeft}
+              size={16}
+            />
+          </div>
+          {showActions && (
+            <ul>
+              <li
+                onClick={createContainer}
+                className='block__editor__nav--item'
+              >
+                <Icon path={mdiPackageVariantClosed} size={16} />
+                <span>Container</span>
+                <Icon path={mdiPlus} size={16} />
+              </li>
+              <li onClick={createMarkdown} className='block__editor__nav--item'>
+                <Icon path={mdiFileDocumentOutline} size={16} />
+                <span>Markdown</span>
+                <Icon path={mdiPlus} size={16} />
+              </li>
+              <li onClick={createTable} className='block__editor__nav--item'>
+                <Icon path={mdiTable} size={16} />
+                <span>Table</span>
+                <Icon path={mdiPlus} size={16} />
+              </li>
+              <li onClick={createEmbed} className='block__editor__nav--item'>
+                <Icon path={mdiCodeTags} size={16} />
+                <span>Embed</span>
+                <Icon path={mdiPlus} size={16} />
+              </li>
+            </ul>
+          )}
         </div>
       </div>
-      <div>
-        <BlockView blocks={state.blocks} />
-        <div>Add Block</div>
+      <div className='block__editor__view'>
+        <h3>{doc.title}</h3>
+        {content}
       </div>
-    </div>
+    </StyledBlockContent>
   )
 }
 
-interface BlockTreeProps {
-  blocks: Block<any, any>[]
-}
+const StyledBlockContent = styled.div`
+  display: flex;
+  height: 100%;
 
-const BlockTree = ({ blocks }: BlockTreeProps) => {
-  return (
-    <div>
-      {blocks.map((block) => {
-        return (
-          <div key={block.id}>
-            <div>{capitalize(block.type)}</div>
-            {block.children.length > 0 && <BlockTree blocks={block.children} />}
-          </div>
-        )
-      })}
-    </div>
-  )
-}
+  & > .block__editor__nav {
+    padding-top: ${({ theme }) => theme.sizes.spaces.df}px;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid ${({ theme }) => theme.colors.border.main};
+    width: 240px;
+    flex: 0 0 auto;
 
-interface BlockViewProps {
-  blocks: Block<any, any>[]
-}
+    & > div:first-child {
+      flex-grow: 1;
+    }
 
-const BlockView = ({ blocks }: BlockViewProps) => {
-  return <pre>{JSON.stringify(blocks)}</pre>
-}
+    & .block__editor__nav--item {
+      display: flex;
+      width: 100%;
+      height: 26px;
+      white-space: nowrap;
+      font-size: ${({ theme }) => theme.sizes.fonts.df}px;
+      cursor: pointer;
+      padding: 0 ${({ theme }) => theme.sizes.spaces.df}px;
+
+      align-items: center;
+      flex: 1 1 auto;
+      background: none;
+      outline: 0;
+      border: 0;
+      text-align: left;
+      color: ${({ theme }) => theme.colors.text.secondary};
+      text-decoration: none;
+      margin: 0;
+      overflow: hidden;
+      svg {
+        color: ${({ theme }) => theme.colors.text.subtle};
+      }
+      span {
+        flex: 1 0 auto;
+      }
+
+      &:hover {
+        background-color: ${({ theme }) => theme.colors.background.secondary};
+      }
+    }
+  }
+
+  & .block__editor__nav--actions {
+    & > ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      & > li {
+        & span {
+          margin-left: ${({ theme }) => theme.sizes.spaces.sm}px;
+          flex: 1 0 auto;
+        }
+      }
+    }
+  }
+
+  & .block__editor__view {
+    flex: 1 1 auto;
+    height: 100%;
+    overflow: auto;
+    padding: ${({ theme }) => theme.sizes.spaces.df}px
+      ${({ theme }) => theme.sizes.spaces.xl}px;
+  }
+`
 
 export default BlockContent
diff --git a/src/cloud/components/Blocks/BlockEditor.tsx b/src/cloud/components/Blocks/BlockEditor.tsx
new file mode 100644
index 0000000000..ad3ba36d8c
--- /dev/null
+++ b/src/cloud/components/Blocks/BlockEditor.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import Application from '../../Application'
+import { SerializedDocWithBookmark } from '../../../interfaces/db/doc'
+import BlockContent from './BlockContent'
+import { Block } from '../../../api/blocks'
+
+interface BlockEditorProps {
+  doc: SerializedDocWithBookmark & { rootBlock: Block<any, any> }
+}
+
+const BlockEditor = ({ doc }: BlockEditorProps) => {
+  return (
+    <Application content={{}}>
+      <BlockContent doc={doc} />
+    </Application>
+  )
+}
+
+export default BlockEditor
diff --git a/src/cloud/components/organisms/DocPage/Edit.tsx b/src/cloud/components/organisms/DocPage/Edit.tsx
new file mode 100644
index 0000000000..e90814f043
--- /dev/null
+++ b/src/cloud/components/organisms/DocPage/Edit.tsx
@@ -0,0 +1,62 @@
+import React from 'react'
+import {
+  SerializedDocWithBookmark,
+  SerializedDoc,
+} from '../../../interfaces/db/doc'
+import Editor from '../../molecules/Editor'
+import { SerializedTeam } from '../../../interfaces/db/team'
+import { SerializedUser } from '../../../interfaces/db/user'
+import styled from '../../../lib/styled'
+import { rightSideTopBarHeight } from '../RightSideTopBar/styled'
+import { SerializedRevision } from '../../../interfaces/db/revision'
+import BlockEditor from '../Blocks/BlockEditor'
+
+interface EditPageProps {
+  doc: SerializedDocWithBookmark
+  team: SerializedTeam
+  user: SerializedUser
+  contributors: SerializedUser[]
+  revisionHistory: SerializedRevision[]
+  backLinks: SerializedDoc[]
+}
+
+const EditPage = ({
+  doc,
+  team,
+  user,
+  contributors,
+  revisionHistory,
+  backLinks,
+}: EditPageProps) => {
+  return (
+    <StyledDocEditPage>
+      {doc.rootBlock == null ? (
+        <Editor
+          team={team}
+          doc={doc}
+          user={user}
+          contributors={contributors}
+          backLinks={backLinks}
+          revisionHistory={revisionHistory}
+        />
+      ) : (
+        <BlockEditor doc={doc as any} />
+      )}
+    </StyledDocEditPage>
+  )
+}
+
+const StyledDocEditPage = styled.div`
+  margin: 0;
+  padding: 0;
+  padding-top: ${rightSideTopBarHeight}px;
+  min-height: calc(100vh - ${rightSideTopBarHeight}px);
+  height: auto;
+  display: flex;
+
+  .cm-link {
+    text-decoration: none;
+  }
+`
+
+export default EditPage

From 84bbba9a0c5d3f52ab8382d55caaa3a80e494514 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 3 Aug 2021 12:13:29 +0900
Subject: [PATCH 015/106] bug fix

---
 src/cloud/lib/editor/hooks/useRealtime.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/cloud/lib/editor/hooks/useRealtime.ts b/src/cloud/lib/editor/hooks/useRealtime.ts
index 2bfa89f96d..6b0b4f909b 100644
--- a/src/cloud/lib/editor/hooks/useRealtime.ts
+++ b/src/cloud/lib/editor/hooks/useRealtime.ts
@@ -11,7 +11,7 @@ export type PresenceChange<T> =
   | { type: 'disconnected'; sessionId: number }
 
 export interface RealtimeArgs<T extends { id: string }> {
-  token: string
+  token?: string
   id: string
   userInfo?: T
 }
@@ -79,7 +79,9 @@ const useRealtime = <T extends { id: string }>({
       })
       .catch((error) => console.error(error))
 
-    const provider = new WebsocketProvider('', token, doc, {
+    // TODO: Get Collaboration Token
+    const authToken = token != null ? token : ''
+    const provider = new WebsocketProvider('', authToken, doc, {
       WebSocketPolyfill: constructor,
       resyncInterval: 10000,
     })

From 8362a2163cf54667dd5d36c89d74fd8699856250 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 4 Aug 2021 09:56:14 +0900
Subject: [PATCH 016/106] Remove always displayed canvas title

---
 src/cloud/components/Blocks/BlockContent.tsx  | 26 +++++-----
 .../components/Blocks/views/Container.tsx     | 49 +++++++++++++++----
 2 files changed, 53 insertions(+), 22 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index e701777666..d24c2bc62c 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -27,9 +27,14 @@ import BlockTree from './BlockTree'
 import Icon from '../../../design/components/atoms/Icon'
 import styled from '../../../design/lib/styled'
 
+interface Canvas extends SerializedDocWithBookmark {
+  rootBlock: ContainerBlock
+}
+
 export interface ViewProps<T extends Block> {
   block: T
   actions: BlockActions
+  canvas: Canvas
 }
 
 export interface FormProps<T extends Block> {
@@ -37,7 +42,7 @@ export interface FormProps<T extends Block> {
 }
 
 interface BlockContentProps {
-  doc: SerializedDocWithBookmark & { rootBlock: ContainerBlock }
+  doc: Canvas 
 }
 
 const BlockContent = ({ doc }: BlockContentProps) => {
@@ -85,19 +90,19 @@ const BlockContent = ({ doc }: BlockContentProps) => {
     const active = currentBlock || state.block
     switch (active.type) {
       case 'container':
-        return <ContainerView block={active} actions={actions} />
+        return <ContainerView block={active} actions={actions} canvas={doc} />
       case 'embed':
-        return <EmbedView block={active} actions={actions} />
+        return <EmbedView block={active} actions={actions} canvas={doc} />
       case 'markdown':
-        return <MarkdownView block={active} actions={actions} />
+        return <MarkdownView block={active} actions={actions} canvas={doc} />
       case 'table':
-        return <TableView block={active} actions={actions} />
+        return <TableView block={active} actions={actions} canvas={doc} />
       case 'github.issue':
-        return <GithubIssueView block={active} actions={actions} />
+        return <GithubIssueView block={active} actions={actions} canvas={doc} />
       default:
         return <div>Block of type ${(active as any).type} is unsupported</div>
     }
-  }, [currentBlock, state, actions])
+  }, [currentBlock, state, actions, doc])
 
   if (state.type === 'loading') {
     return <div>loading</div>
@@ -151,10 +156,7 @@ const BlockContent = ({ doc }: BlockContentProps) => {
           )}
         </div>
       </div>
-      <div className='block__editor__view'>
-        <h3>{doc.title}</h3>
-        {content}
-      </div>
+      <div className='block__editor__view'>{content}</div>
     </StyledBlockContent>
   )
 }
@@ -225,8 +227,6 @@ const StyledBlockContent = styled.div`
     flex: 1 1 auto;
     height: 100%;
     overflow: auto;
-    padding: ${({ theme }) => theme.sizes.spaces.df}px
-      ${({ theme }) => theme.sizes.spaces.xl}px;
   }
 `
 
diff --git a/src/cloud/components/Blocks/views/Container.tsx b/src/cloud/components/Blocks/views/Container.tsx
index eafe9cd10e..06fcf361b1 100644
--- a/src/cloud/components/Blocks/views/Container.tsx
+++ b/src/cloud/components/Blocks/views/Container.tsx
@@ -18,10 +18,15 @@ import Icon from '../../../../design/components/atoms/Icon'
 import styled from '../../../../design/lib/styled'
 
 interface ContainerViewProps extends ViewProps<ContainerBlock> {
-  hideAdd?: boolean
+  nested?: boolean
 }
 
-const ContainerView = ({ block, actions, hideAdd }: ContainerViewProps) => {
+const ContainerView = ({
+  block,
+  actions,
+  canvas,
+  nested,
+}: ContainerViewProps) => {
   const { openModal, closeAllModals } = useModal()
   const [addSelectOpen, setAddSelectOpen] = useState(false)
 
@@ -55,20 +60,32 @@ const ContainerView = ({ block, actions, hideAdd }: ContainerViewProps) => {
   }, [createBlock, openModal, modalOptions])
 
   return (
-    <StyledContainerView>
+    <StyledContainerView className={nested && 'block__view--nested'}>
+      <h1>{canvas.rootBlock.id === block.id ? canvas.title : block.name}</h1>
       <div className='block__view__container__content'>
         {block.children.map((child) => {
           switch (child.type) {
             case 'container':
               return (
-                <ContainerView block={child} actions={actions} hideAdd={true} />
+                <ContainerView
+                  block={child}
+                  actions={actions}
+                  nested={true}
+                  canvas={canvas}
+                />
               )
             case 'embed':
-              return <EmbedView block={child} actions={actions} />
+              return (
+                <EmbedView block={child} actions={actions} canvas={canvas} />
+              )
             case 'markdown':
-              return <MarkdownView block={child} actions={actions} />
+              return (
+                <MarkdownView block={child} actions={actions} canvas={canvas} />
+              )
             case 'table':
-              return <TableView block={child} actions={actions} />
+              return (
+                <TableView block={child} actions={actions} canvas={canvas} />
+              )
             default:
               return (
                 <div>Block of type ${(child as any).type} is unsupported</div>
@@ -76,7 +93,7 @@ const ContainerView = ({ block, actions, hideAdd }: ContainerViewProps) => {
           }
         })}
       </div>
-      {!hideAdd && (
+      {!nested && (
         <div
           onClick={() => setAddSelectOpen((open) => !open)}
           className='block__view__container__add'
@@ -113,9 +130,23 @@ const ContainerView = ({ block, actions, hideAdd }: ContainerViewProps) => {
 
 const StyledContainerView = styled.div`
   width: 100%;
+  padding: ${({ theme }) => theme.sizes.spaces.df}px
+    ${({ theme }) => theme.sizes.spaces.xl}px;
+
+  & > & h1 {
+    font-size: 5px;
+  }
+
+  &.block__view--nested {
+    padding: 0;
+    & h1 {
+      font-size: ${({ theme }) => theme.sizes.fonts.md}px;
+      color: ${({ theme }) => theme.colors.text.subtle};
+    }
+  }
 
   & .block__view__container__content > * {
-    margin-top: ${({ theme }) => theme.sizes.spaces.md}px;
+    margin-bottom: ${({ theme }) => theme.sizes.spaces.md}px;
   }
 
   & .block__view__container__add {

From 4f0d8af33574b8749d15ccf60a17716b39316e0a Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 4 Aug 2021 12:16:17 +0900
Subject: [PATCH 017/106] full screen embed

---
 src/cloud/components/Blocks/BlockContent.tsx  |  2 +-
 .../components/Blocks/views/Container.tsx     |  5 ++-
 src/cloud/components/Blocks/views/Embed.tsx   |  7 ++--
 src/design/components/atoms/AspectRation.tsx  | 34 +++++++++++++++++++
 4 files changed, 41 insertions(+), 7 deletions(-)
 create mode 100644 src/design/components/atoms/AspectRation.tsx

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index d24c2bc62c..f03aa6454b 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -42,7 +42,7 @@ export interface FormProps<T extends Block> {
 }
 
 interface BlockContentProps {
-  doc: Canvas 
+  doc: Canvas
 }
 
 const BlockContent = ({ doc }: BlockContentProps) => {
diff --git a/src/cloud/components/Blocks/views/Container.tsx b/src/cloud/components/Blocks/views/Container.tsx
index 06fcf361b1..abdadad0d0 100644
--- a/src/cloud/components/Blocks/views/Container.tsx
+++ b/src/cloud/components/Blocks/views/Container.tsx
@@ -16,6 +16,7 @@ import { Block, ContainerBlock } from '../../../api/blocks'
 import { useModal } from '../../../../design/lib/stores/modal'
 import Icon from '../../../../design/components/atoms/Icon'
 import styled from '../../../../design/lib/styled'
+import AspectRatio from '../../../../design/components/atoms/AspectRation'
 
 interface ContainerViewProps extends ViewProps<ContainerBlock> {
   nested?: boolean
@@ -76,7 +77,9 @@ const ContainerView = ({
               )
             case 'embed':
               return (
-                <EmbedView block={child} actions={actions} canvas={canvas} />
+                <AspectRatio width={16} height={9}>
+                  <EmbedView block={child} actions={actions} canvas={canvas} />
+                </AspectRatio>
               )
             case 'markdown':
               return (
diff --git a/src/cloud/components/Blocks/views/Embed.tsx b/src/cloud/components/Blocks/views/Embed.tsx
index 81541919c8..02ba8cb91d 100644
--- a/src/cloud/components/Blocks/views/Embed.tsx
+++ b/src/cloud/components/Blocks/views/Embed.tsx
@@ -13,13 +13,10 @@ const EmbedView = ({ block }: ViewProps<EmbedBlock>) => {
 
 const StyledEmbedView = styled.div`
   width: 100%;
-  position: relative;
-  padding-top: 56.25%;
+  height: 100%;
+  overflow: hidden;
 
   & iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
     height: 100%;
     width: 100%;
   }
diff --git a/src/design/components/atoms/AspectRation.tsx b/src/design/components/atoms/AspectRation.tsx
new file mode 100644
index 0000000000..18b8d000d9
--- /dev/null
+++ b/src/design/components/atoms/AspectRation.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import styled from '../../lib/styled'
+
+interface AspectRationProps {
+  height: number
+  width: number
+}
+
+const AspectRatio = ({
+  height,
+  width,
+  children,
+}: React.PropsWithChildren<AspectRationProps>) => {
+  return (
+    <Container style={{ paddingTop: `${(height / width) * 100}%` }}>
+      <div>{children}</div>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  width: 100%;
+  position: relative;
+
+  & > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+`
+
+export default AspectRatio

From 70a4393ed8ae6472fd6bb30a82a661d949778caa Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 4 Aug 2021 16:51:03 +0900
Subject: [PATCH 018/106] \update current block correctly

---
 src/cloud/components/Blocks/BlockContent.tsx | 14 +++++++++++++-
 src/cloud/components/Blocks/BlockTree.tsx    | 20 ++++++++++++++++++--
 src/design/lib/utils/tree.ts                 | 19 +++++++++++++++++++
 3 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 src/design/lib/utils/tree.ts

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index f03aa6454b..1531316f4a 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useMemo } from 'react'
+import React, { useCallback, useState, useMemo, useEffect } from 'react'
 import {
   mdiPlus,
   mdiChevronDown,
@@ -26,6 +26,7 @@ import ContainerForm from './forms/ContainerForm'
 import BlockTree from './BlockTree'
 import Icon from '../../../design/components/atoms/Icon'
 import styled from '../../../design/lib/styled'
+import { find } from '../../../design/lib/utils/tree'
 
 interface Canvas extends SerializedDocWithBookmark {
   rootBlock: ContainerBlock
@@ -60,6 +61,16 @@ const BlockContent = ({ doc }: BlockContentProps) => {
     [doc, actions, closeAllModals]
   )
 
+  useEffect(() => {
+    if (state.type === 'loaded') {
+      setCurrentBlock((prev) => {
+        return prev != null
+          ? find(state.block, (block) => block.id === prev.id)
+          : null
+      })
+    }
+  }, [state])
+
   const modalOptions = useMemo(() => {
     return {
       showCloseIcon: true,
@@ -113,6 +124,7 @@ const BlockContent = ({ doc }: BlockContentProps) => {
       <div className='block__editor__nav'>
         <BlockTree
           root={state.block}
+          active={currentBlock || doc.rootBlock}
           onSelect={setCurrentBlock}
           onDelete={actions.remove}
         />
diff --git a/src/cloud/components/Blocks/BlockTree.tsx b/src/cloud/components/Blocks/BlockTree.tsx
index 8d61861e4a..196898db91 100644
--- a/src/cloud/components/Blocks/BlockTree.tsx
+++ b/src/cloud/components/Blocks/BlockTree.tsx
@@ -16,12 +16,23 @@ interface BlockTreeProps {
   root: Block
   onSelect: (block: Block) => void
   onDelete: (block: Block) => void
+  active?: Block
   depth?: number
 }
 
-const BlockTree = ({ root, onSelect, onDelete, depth }: BlockTreeProps) => {
+const BlockTree = ({
+  root,
+  onSelect,
+  onDelete,
+  depth,
+  active,
+}: BlockTreeProps) => {
   return (
-    <StyledBlockTree key={root.id} depth={depth || 0}>
+    <StyledBlockTree
+      className={active && active.id === root.id && 'block__tree--active'}
+      key={root.id}
+      depth={depth || 0}
+    >
       <div className='block__tree__label'>
         <BlockIcon block={root} size={16} />
         <span onClick={() => onSelect(root)}>{capitalize(root.type)}</span>
@@ -41,6 +52,7 @@ const BlockTree = ({ root, onSelect, onDelete, depth }: BlockTreeProps) => {
               root={child}
               onSelect={onSelect}
               onDelete={onDelete}
+              active={active}
               depth={(depth || 0) + 1}
             />
           ))}
@@ -52,6 +64,10 @@ const BlockTree = ({ root, onSelect, onDelete, depth }: BlockTreeProps) => {
 const StyledBlockTree = styled.div<{ depth: number }>`
   font-size: ${({ theme }) => theme.sizes.fonts.df}px;
 
+  &.block__tree--active > .block__tree__label {
+    background-color: ${({ theme }) => theme.colors.background.secondary};
+  }
+
   & > .block__tree__label {
     padding-left: ${({ depth }) => 18 + (depth as number) * 15}px;
     display: flex;
diff --git a/src/design/lib/utils/tree.ts b/src/design/lib/utils/tree.ts
new file mode 100644
index 0000000000..0b190f6963
--- /dev/null
+++ b/src/design/lib/utils/tree.ts
@@ -0,0 +1,19 @@
+type Node<T> = T & { children: Node<T>[] }
+
+export function find<T extends Node<any>>(
+  node: Node<T>,
+  cmp: (node: Node<T>) => boolean
+): Node<T> | null {
+  if (cmp(node)) {
+    return node
+  }
+
+  for (const child of node.children) {
+    const found = find(child, cmp)
+    if (found != null) {
+      return found
+    }
+  }
+
+  return null
+}

From 45dd6d7ec64eba470dde54ace39426c9421d3bf8 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Fri, 6 Aug 2021 10:36:33 +0900
Subject: [PATCH 019/106] Markdown block improvements

---
 src/cloud/components/Blocks/BlockContent.tsx  | 54 +++++++++--
 .../components/Blocks/views/Container.tsx     | 23 ++++-
 .../components/Blocks/views/Markdown.tsx      | 94 +++++++++++++++----
 src/cloud/lib/editor/hooks/useRealtime.ts     |  6 +-
 4 files changed, 147 insertions(+), 30 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index 1531316f4a..e1cef6abc1 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -27,6 +27,8 @@ import BlockTree from './BlockTree'
 import Icon from '../../../design/components/atoms/Icon'
 import styled from '../../../design/lib/styled'
 import { find } from '../../../design/lib/utils/tree'
+import { WebsocketProvider } from 'y-websocket'
+import useRealtime from '../../lib/editor/hooks/useRealtime'
 
 interface Canvas extends SerializedDocWithBookmark {
   rootBlock: ContainerBlock
@@ -36,6 +38,7 @@ export interface ViewProps<T extends Block> {
   block: T
   actions: BlockActions
   canvas: Canvas
+  realtime: WebsocketProvider
 }
 
 export interface FormProps<T extends Block> {
@@ -52,6 +55,10 @@ const BlockContent = ({ doc }: BlockContentProps) => {
   const { translate } = useI18n()
   const [currentBlock, setCurrentBlock] = useState<Block | null>(null)
   const [showActions, setShowActions] = useState(true)
+  const [provider] = useRealtime({
+    token: doc.collaborationToken || '',
+    id: doc.id,
+  })
 
   const createBlock = useCallback(
     async (block: Omit<Block, 'id'>) => {
@@ -101,19 +108,54 @@ const BlockContent = ({ doc }: BlockContentProps) => {
     const active = currentBlock || state.block
     switch (active.type) {
       case 'container':
-        return <ContainerView block={active} actions={actions} canvas={doc} />
+        return (
+          <ContainerView
+            block={active}
+            actions={actions}
+            canvas={doc}
+            realtime={provider}
+          />
+        )
       case 'embed':
-        return <EmbedView block={active} actions={actions} canvas={doc} />
+        return (
+          <EmbedView
+            block={active}
+            actions={actions}
+            canvas={doc}
+            realtime={provider}
+          />
+        )
       case 'markdown':
-        return <MarkdownView block={active} actions={actions} canvas={doc} />
+        return (
+          <MarkdownView
+            block={active}
+            actions={actions}
+            canvas={doc}
+            realtime={provider}
+          />
+        )
       case 'table':
-        return <TableView block={active} actions={actions} canvas={doc} />
+        return (
+          <TableView
+            block={active}
+            actions={actions}
+            canvas={doc}
+            realtime={provider}
+          />
+        )
       case 'github.issue':
-        return <GithubIssueView block={active} actions={actions} canvas={doc} />
+        return (
+          <GithubIssueView
+            block={active}
+            actions={actions}
+            canvas={doc}
+            realtime={provider}
+          />
+        )
       default:
         return <div>Block of type ${(active as any).type} is unsupported</div>
     }
-  }, [currentBlock, state, actions, doc])
+  }, [currentBlock, state, actions, doc, provider])
 
   if (state.type === 'loading') {
     return <div>loading</div>
diff --git a/src/cloud/components/Blocks/views/Container.tsx b/src/cloud/components/Blocks/views/Container.tsx
index abdadad0d0..eaf6d51c4d 100644
--- a/src/cloud/components/Blocks/views/Container.tsx
+++ b/src/cloud/components/Blocks/views/Container.tsx
@@ -27,6 +27,7 @@ const ContainerView = ({
   actions,
   canvas,
   nested,
+  realtime,
 }: ContainerViewProps) => {
   const { openModal, closeAllModals } = useModal()
   const [addSelectOpen, setAddSelectOpen] = useState(false)
@@ -73,21 +74,37 @@ const ContainerView = ({
                   actions={actions}
                   nested={true}
                   canvas={canvas}
+                  realtime={realtime}
                 />
               )
             case 'embed':
               return (
                 <AspectRatio width={16} height={9}>
-                  <EmbedView block={child} actions={actions} canvas={canvas} />
+                  <EmbedView
+                    block={child}
+                    actions={actions}
+                    canvas={canvas}
+                    realtime={realtime}
+                  />
                 </AspectRatio>
               )
             case 'markdown':
               return (
-                <MarkdownView block={child} actions={actions} canvas={canvas} />
+                <MarkdownView
+                  block={child}
+                  actions={actions}
+                  canvas={canvas}
+                  realtime={realtime}
+                />
               )
             case 'table':
               return (
-                <TableView block={child} actions={actions} canvas={canvas} />
+                <TableView
+                  block={child}
+                  actions={actions}
+                  canvas={canvas}
+                  realtime={realtime}
+                />
               )
             default:
               return (
diff --git a/src/cloud/components/Blocks/views/Markdown.tsx b/src/cloud/components/Blocks/views/Markdown.tsx
index 46eff4a23e..282e36d4f4 100644
--- a/src/cloud/components/Blocks/views/Markdown.tsx
+++ b/src/cloud/components/Blocks/views/Markdown.tsx
@@ -1,14 +1,19 @@
-import React, { useState, useMemo, useCallback, useRef } from 'react'
+import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react'
 import styled from '../../../../design/lib/styled'
 import { MarkdownBlock } from '../../../api/blocks'
 import CodeMirrorEditor from '../../../lib/editor/components/CodeMirrorEditor'
 import { CodeMirrorKeyMap, useSettings } from '../../../lib/stores/settings'
 import { ViewProps } from '../BlockContent'
 import MarkdownPreview from '../../MarkdownView'
+import { CodemirrorBinding } from 'y-codemirror'
+import Spinner from '../../../../design/components/atoms/Spinner'
+import Icon from '../../../../design/components/atoms/Icon'
+import { mdiEyeOutline, mdiPencil } from '@mdi/js'
 
-const MarkdownView = ({ block }: ViewProps<MarkdownBlock>) => {
-  const [mode, setMode] = useState<'editor' | 'view'>()
+const MarkdownView = ({ block, realtime }: ViewProps<MarkdownBlock>) => {
+  const [mode, setMode] = useState<'editor' | 'view'>('view')
   const [editorContent, setEditorContent] = useState('')
+  const [synced, setSynced] = useState(realtime.synced)
   const editorRef = useRef<CodeMirror.Editor | null>(null)
   const { settings } = useSettings()
   const editorConfig: CodeMirror.EditorConfiguration = useMemo(() => {
@@ -41,33 +46,82 @@ const MarkdownView = ({ block }: ViewProps<MarkdownBlock>) => {
     }
   }, [settings])
 
-  const bindCallback = useCallback((editor: CodeMirror.Editor) => {
-    setEditorContent(editor.getValue())
-    editorRef.current = editor
-    editorRef.current.on('blue', () => setMode('view'))
+  useEffect(() => {
+    realtime.on('sync', setSynced)
+    return () => realtime.off('sync', setSynced)
+  }, [realtime])
+
+  const bindCallback = useCallback(
+    (editor: CodeMirror.Editor) => {
+      setEditorContent(editor.getValue())
+      editorRef.current = editor
+      editor.on('change', (instance) => {
+        setEditorContent(instance.getValue())
+      })
+      editor.setValue('')
+      new CodemirrorBinding(
+        realtime.doc.getText(block.id),
+        editorRef.current,
+        realtime.awareness
+      )
+      editorRef.current.clearHistory()
+    },
+    [block.id, realtime]
+  )
+
+  const toggleMode = useCallback(() => {
+    setMode((mode) => (mode === 'view' ? 'editor' : 'view'))
+    editorRef.current && editorRef.current.refresh()
   }, [])
 
+  if (!synced) {
+    return (
+      <StyledMarkdownView className='block__markdown--mode-loading'>
+        <Spinner />
+      </StyledMarkdownView>
+    )
+  }
+
   return (
     <StyledMarkdownView className={`block__markdown--mode-${mode}`}>
-      <CodeMirrorEditor bind={bindCallback} config={editorConfig} />
-      <div
-        onClick={() => setMode('editor')}
-        className='block__markdown--preview'
-      >
-        <MarkdownPreview content={editorContent} />
+      <div className='block__markdown--toolbar' onClick={toggleMode}>
+        <Icon path={mode === 'view' ? mdiPencil : mdiEyeOutline} size={16} />
       </div>
+      <div className='block__markdown--editor'>
+        <CodeMirrorEditor bind={bindCallback} config={editorConfig} />
+      </div>
+      <MarkdownPreview
+        className='block__markdown--preview'
+        content={editorContent}
+      />
     </StyledMarkdownView>
   )
 }
 
 const StyledMarkdownView = styled.div`
   position: relative;
-  & > .block__markdown--preview {
+  min-height: 20px;
+
+  &:hover .block__markdown--toolbar {
+    display: block;
+  }
+
+  & .block__markdown--toolbar {
+    display: none;
     position: absolute;
-    left: 0;
+    right: 0;
     top: 0;
-    width: 100%;
-    height: 100%;
+    z-index: 1000;
+    padding: ${({ theme }) => theme.sizes.spaces.sm}px;
+
+    & svg {
+      cursor: pointer;
+    }
+  }
+
+  & > .block__markdown--preview {
+    background-color: ${({ theme }) => theme.colors.background.primary};
+    padding: 0;
   }
 
   &.block__markdown--mode-editor {
@@ -75,6 +129,12 @@ const StyledMarkdownView = styled.div`
       display: none;
     }
   }
+
+  &.block__markdown--mode-view {
+    & > .block__markdown--editor {
+      display: none;
+    }
+  }
 `
 
 function resolveKeyMap(keyMap: CodeMirrorKeyMap) {
diff --git a/src/cloud/lib/editor/hooks/useRealtime.ts b/src/cloud/lib/editor/hooks/useRealtime.ts
index 6b0b4f909b..2bfa89f96d 100644
--- a/src/cloud/lib/editor/hooks/useRealtime.ts
+++ b/src/cloud/lib/editor/hooks/useRealtime.ts
@@ -11,7 +11,7 @@ export type PresenceChange<T> =
   | { type: 'disconnected'; sessionId: number }
 
 export interface RealtimeArgs<T extends { id: string }> {
-  token?: string
+  token: string
   id: string
   userInfo?: T
 }
@@ -79,9 +79,7 @@ const useRealtime = <T extends { id: string }>({
       })
       .catch((error) => console.error(error))
 
-    // TODO: Get Collaboration Token
-    const authToken = token != null ? token : ''
-    const provider = new WebsocketProvider('', authToken, doc, {
+    const provider = new WebsocketProvider('', token, doc, {
       WebSocketPolyfill: constructor,
       resyncInterval: 10000,
     })

From d3f133370d5b8783baadfc1820b520a629518238 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 10 Aug 2021 09:31:37 +0900
Subject: [PATCH 020/106] in flow integration

---
 src/cloud/components/Blocks/BlockTree.tsx     | 38 +++++++-
 .../Blocks/forms/GithubIssueForm.tsx          | 88 ++++++++++++++++++-
 src/design/lib/stores/integrations/index.ts   |  2 +-
 3 files changed, 124 insertions(+), 4 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockTree.tsx b/src/cloud/components/Blocks/BlockTree.tsx
index 196898db91..d221fd8165 100644
--- a/src/cloud/components/Blocks/BlockTree.tsx
+++ b/src/cloud/components/Blocks/BlockTree.tsx
@@ -35,7 +35,7 @@ const BlockTree = ({
     >
       <div className='block__tree__label'>
         <BlockIcon block={root} size={16} />
-        <span onClick={() => onSelect(root)}>{capitalize(root.type)}</span>
+        <span onClick={() => onSelect(root)}>{blockTitle(root)}</span>
         <span onClick={() => onDelete(root)}>
           <Icon
             className='block__tree__action'
@@ -61,14 +61,27 @@ const BlockTree = ({
   )
 }
 
+function blockTitle(block: Block) {
+  switch (block.type) {
+    case 'github.issue':
+      return block.data.number != null
+        ? `#${block.data.number}`
+        : 'Github Issue'
+    default:
+      return capitalize(block.type)
+  }
+}
+
 const StyledBlockTree = styled.div<{ depth: number }>`
   font-size: ${({ theme }) => theme.sizes.fonts.df}px;
+  position: relative;
 
   &.block__tree--active > .block__tree__label {
     background-color: ${({ theme }) => theme.colors.background.secondary};
   }
 
   & > .block__tree__label {
+    position: relative;
     padding-left: ${({ depth }) => 18 + (depth as number) * 15}px;
     display: flex;
     width: 100%;
@@ -87,9 +100,11 @@ const StyledBlockTree = styled.div<{ depth: number }>`
     text-decoration: none;
     margin: 0;
     overflow: hidden;
+
     & > span:first-of-type {
       flex-grow: 1;
     }
+
     & svg {
       color: ${({ theme }) => theme.colors.text.subtle};
       margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
@@ -106,6 +121,27 @@ const StyledBlockTree = styled.div<{ depth: number }>`
         display: block;
       }
     }
+
+    &:before {
+      content: '';
+      position: absolute;
+      width: 8px;
+      top: 0;
+      left: ${({ depth }) => 5 + (depth as number) * 15}px;
+      border-bottom: 1px solid ${({ theme }) => theme.colors.border.second};
+      height: 50%;
+    }
+  }
+  & > .block__tree__children {
+    position: relative;
+    &:before {
+      content: '';
+      position: absolute;
+      border-left: 1px solid ${({ theme }) => theme.colors.border.second};
+      top: 0;
+      left: ${({ depth }) => 5 + (depth as number) * 15}px;
+      height: calc(100% - 13px);
+    }
   }
 `
 
diff --git a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
index c8692e155e..3d148eac33 100644
--- a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
+++ b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
@@ -1,4 +1,4 @@
-import { mdiGithub } from '@mdi/js'
+import { mdiGithub, mdiPlus } from '@mdi/js'
 import React, {
   useMemo,
   useState,
@@ -20,6 +20,8 @@ import styled from '../../../../design/lib/styled'
 import { GithubIssueBlock } from '../../../api/blocks'
 import { getAction, IntegrationActionTypes } from '../../../api/integrations'
 import { SerializedTeamIntegration } from '../../../interfaces/db/connections'
+import { usePage } from '../../../lib/stores/pageStore'
+import ServiceConnect, { Integration } from '../../ServiceConnect'
 import { FormProps } from '../BlockContent'
 
 type State =
@@ -29,6 +31,7 @@ type State =
 
 const GithubIssueForm = ({ onSubmit }: FormProps<GithubIssueBlock>) => {
   const integrationState = useTeamIntegrations()
+  const { team } = usePage()
   const [state, setState] = useState<State>({ stage: 'initialising' })
 
   useEffect(() => {
@@ -62,6 +65,18 @@ const GithubIssueForm = ({ onSubmit }: FormProps<GithubIssueBlock>) => {
     [onSubmit]
   )
 
+  const addIntegration = useCallback(
+    (integration: Integration) => {
+      if (
+        integrationState.type !== 'initialising' &&
+        integration.type === 'team'
+      ) {
+        integrationState.actions.addIntegration(integration.integration)
+      }
+    },
+    [integrationState]
+  )
+
   return (
     <GithubIssueFormLayout>
       {(() => {
@@ -69,7 +84,33 @@ const GithubIssueForm = ({ onSubmit }: FormProps<GithubIssueBlock>) => {
           case 'initialising':
             return <Spinner />
           case 'integrate':
-            return <div>Please Integrate</div>
+            return (
+              <StyledIntegrationManager>
+                <div>
+                  <div className='github-issue__form__integrate__icons'>
+                    <img src='/app/static/images/logo_symbol.svg' />
+                    <Icon path={mdiPlus} size={20} />
+                    <img src='/app/static/logos/github.png' />
+                  </div>
+                  <div>
+                    <h1>GitHub</h1>
+                    <p>
+                      Integrate with GitHub to import Issues automatically. You
+                      can check the task progress, assignees, due date and more
+                      at a glance.
+                    </p>
+                    <ServiceConnect
+                      service='github:team'
+                      team={team}
+                      onConnect={addIntegration}
+                    />
+                  </div>
+                </div>
+                <div className='github-issue__form__integrate__splash'>
+                  <img />
+                </div>
+              </StyledIntegrationManager>
+            )
           case 'issue_select':
             return (
               <GithubIssueSelector
@@ -83,6 +124,49 @@ const GithubIssueForm = ({ onSubmit }: FormProps<GithubIssueBlock>) => {
   )
 }
 
+const StyledIntegrationManager = styled.div`
+  padding: 0 ${({ theme }) => theme.sizes.spaces.l}px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  & > div {
+    width: 50%;
+  }
+
+  & .github-issue__form__integrate__icons {
+    display: flex;
+    align-items: center;
+    & > img {
+      height: ${({ theme }) => theme.sizes.fonts.xl * 2}px;
+    }
+
+    & > svg {
+      margin: 0 ${({ theme }) => theme.sizes.spaces.sm}px;
+    }
+  }
+
+  & h1 {
+    font-size: ${({ theme }) => theme.sizes.fonts.xl}px;
+    margin: ${({ theme }) => theme.sizes.spaces.l}px 0;
+  }
+
+  & p {
+    font-size: ${({ theme }) => theme.sizes.fonts.md}px;
+    margin: ${({ theme }) => theme.sizes.spaces.md}px 0;
+  }
+
+  & .github-issue__form__integrate__splash {
+    background-color: #c4c4c4;
+    height: 300px;
+    width: 400px;
+    & > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+`
+
 interface GithubIssueSelectorProps {
   integrations: SerializedTeamIntegration[]
   onImport: (issues: Record<string, any>[]) => Promise<void>
diff --git a/src/design/lib/stores/integrations/index.ts b/src/design/lib/stores/integrations/index.ts
index 400bbc5df3..dfb5f6c223 100644
--- a/src/design/lib/stores/integrations/index.ts
+++ b/src/design/lib/stores/integrations/index.ts
@@ -16,7 +16,7 @@ interface Actions {
 }
 
 export type State =
-  | { type: 'initialising' }
+  | { type: 'initialising'; actions: Actions }
   | {
       type: 'working'
       integrations: SerializedTeamIntegration[]

From fa1d85a2352b2075391956a64f30bb6cc78e8217 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 10 Aug 2021 09:36:14 +0900
Subject: [PATCH 021/106] fix select all checkbox being selected when no issues

---
 src/cloud/components/Blocks/forms/GithubIssueForm.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
index 3d148eac33..018648f79e 100644
--- a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
+++ b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
@@ -394,7 +394,10 @@ const GithubIssueSelector = ({
                 <input
                   type='checkbox'
                   onChange={toggleAll}
-                  checked={filteredIssues.length === selectedIssues.size}
+                  checked={
+                    filteredIssues.length > 0 &&
+                    filteredIssues.length === selectedIssues.size
+                  }
                 />{' '}
                 Title
               </td>

From cafbcae1fd0ac7450b619d779723910dc3454f9f Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 10 Aug 2021 10:57:15 +0900
Subject: [PATCH 022/106] get more button

---
 .../Blocks/forms/GithubIssueForm.tsx          | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
index 018648f79e..754639f1dc 100644
--- a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
+++ b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
@@ -187,6 +187,7 @@ const GithubIssueSelector = ({
   const [currentRepo, setCurrentRepo] = useState<Repo | null>(null)
   const [issues, setIssues] = useState<Issue[]>([])
   const [selectedIssues, setSelectedIssues] = useState<Set<Issue>>(new Set())
+  const [page, setPage] = useState(1)
   const [isLoading, setIsLoading] = useState(false)
   const [search, setSearch] = useState('')
   const { pushApiErrorMessage } = useToast()
@@ -232,6 +233,7 @@ const GithubIssueSelector = ({
   useEffect(() => {
     setIssues([])
     setSelectedIssues(new Set())
+    setPage(1)
     if (currentRepo != null) {
       setIsLoading(true)
       getAction(integrationRef.current, 'repo:issues', {
@@ -245,6 +247,25 @@ const GithubIssueSelector = ({
     }
   }, [currentRepo])
 
+  const getMore = useCallback(async () => {
+    if (currentRepo != null) {
+      try {
+        setIsLoading(true)
+        const issues = await getAction(integrationRef.current, 'repo:issues', {
+          owner: currentRepo.owner.login,
+          repo: currentRepo.name,
+          page: page + 1,
+        })
+        setPage(page + 1)
+        setIssues((prev) => prev.concat(issues))
+      } catch (err) {
+        errorHandleRef.current(err)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+  }, [currentRepo, page])
+
   const setIntegration = useCallback(
     ({ value }) => {
       const integration = integrations.find(({ id }) => id === value)
@@ -434,6 +455,9 @@ const GithubIssueSelector = ({
             ))}
           </tbody>
         </table>
+        <div className='github-issue__form__more'>
+          <Button onClick={getMore}>Get More</Button>
+        </div>
       </div>
       <div className='github-issue__form__action'>
         <Button
@@ -493,6 +517,12 @@ const StyledGithubIssueForm = styled.div`
     overflow: auto;
   }
 
+  & .github-issue__form__more {
+    display: flex;
+    justify-content: end;
+    margin-top: ${({ theme }) => theme.sizes.spaces.md}px;
+  }
+
   & .github-issue__form__action {
     display: flex;
     align-items: center;

From dac2715113901c9e0326687818b085d84d2bf5bf Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 10 Aug 2021 11:03:58 +0900
Subject: [PATCH 023/106] fixed pr links & numbers

---
 .../components/Blocks/views/GithubIssue.tsx   | 22 +++++++------------
 1 file changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/cloud/components/Blocks/views/GithubIssue.tsx b/src/cloud/components/Blocks/views/GithubIssue.tsx
index 2e25994dce..b48cc5ee2a 100644
--- a/src/cloud/components/Blocks/views/GithubIssue.tsx
+++ b/src/cloud/components/Blocks/views/GithubIssue.tsx
@@ -1,11 +1,12 @@
 import React from 'react'
 import { ViewProps } from '../BlockContent'
-import { mdiLinkBoxOutline } from '@mdi/js'
+import { mdiLink } from '@mdi/js'
 import styled from '../../../../design/lib/styled'
 import Icon from '../../../../design/components/atoms/Icon'
 import { GithubIssueBlock } from '../../../api/blocks'
 
 const GithubIssueView = ({ block }: ViewProps<GithubIssueBlock>) => {
+  console.log(block)
   return (
     <StyledGithubIssueView>
       <h1>{block.data.title}</h1>
@@ -16,7 +17,7 @@ const GithubIssueView = ({ block }: ViewProps<GithubIssueBlock>) => {
             <a href={block.data.html_url}>
               <div>
                 <span>#{block.data.number}</span>
-                <Icon path={mdiLinkBoxOutline} />
+                <Icon path={mdiLink} />
               </div>
             </a>
           </div>
@@ -42,18 +43,11 @@ const GithubIssueView = ({ block }: ViewProps<GithubIssueBlock>) => {
         <div>
           <div>Linked PR</div>
           <div>
-            <a
-              href={
-                block.data.pull_request != null
-                  ? block.data.pull_request.html_url
-                  : '#'
-              }
-            >
-              #
-              {block.data.pull_request != null
-                ? block.data.pull_request.number
-                : ''}
-            </a>
+            {block.data.pull_request != null && (
+              <a href={block.data.pull_request.html_url}>
+                #{block.data.pull_request.number || block.data.number}
+              </a>
+            )}
           </div>
         </div>
       </div>

From 15615276f81878bfcaf73ee80d013cb0bad76d98 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 10 Aug 2021 11:13:04 +0900
Subject: [PATCH 024/106] remove console.logs

---
 src/cloud/components/Blocks/views/GithubIssue.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/cloud/components/Blocks/views/GithubIssue.tsx b/src/cloud/components/Blocks/views/GithubIssue.tsx
index b48cc5ee2a..d8b1024133 100644
--- a/src/cloud/components/Blocks/views/GithubIssue.tsx
+++ b/src/cloud/components/Blocks/views/GithubIssue.tsx
@@ -6,7 +6,6 @@ import Icon from '../../../../design/components/atoms/Icon'
 import { GithubIssueBlock } from '../../../api/blocks'
 
 const GithubIssueView = ({ block }: ViewProps<GithubIssueBlock>) => {
-  console.log(block)
   return (
     <StyledGithubIssueView>
       <h1>{block.data.title}</h1>

From 78b0d45d7f677ae3e5e34171dee8f8783225b203 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:49:58 +0900
Subject: [PATCH 025/106] table module

---
 src/cloud/lib/blocks/table.ts | 207 ++++++++++++++++++++++++++++++++++
 1 file changed, 207 insertions(+)
 create mode 100644 src/cloud/lib/blocks/table.ts

diff --git a/src/cloud/lib/blocks/table.ts b/src/cloud/lib/blocks/table.ts
new file mode 100644
index 0000000000..b481b01249
--- /dev/null
+++ b/src/cloud/lib/blocks/table.ts
@@ -0,0 +1,207 @@
+import { v4 as uuid } from 'uuid'
+import { Array as YArray, Map as YMap } from 'yjs'
+
+export type DataType =
+  | 'text'
+  | 'number'
+  | 'date'
+  | 'url'
+  | 'checkbox'
+  | 'user'
+  | 'prop'
+
+export interface Column {
+  id: string
+  name: string
+  data_type: DataType
+  default?: string
+}
+
+export interface Table {
+  columns: Column[]
+  row_data: Map<string, Record<string, string>>
+}
+
+export function createTable(columns: Omit<Column, 'id'>[]): Table {
+  return {
+    columns: columns.map((col) => ({ ...col, id: uuid() })),
+    row_data: new Map(),
+  }
+}
+
+export function addColumn(column: Omit<Column, 'id'>, table: Table): Table {
+  const id = uuid()
+  return { ...table, columns: [...table.columns, { id, ...column }] }
+}
+
+export function moveColumn(target: number, column: Column, table: Table) {
+  const index = table.columns.findIndex((col) => col.id === column.id)
+  if (index < 0 || target < 0) {
+    return table
+  }
+
+  const mutable = table.columns.slice()
+  mutable.splice(index, 1)
+  mutable.splice(target, 0, column)
+
+  return { ...table, columns: mutable }
+}
+
+export function deleteColumn(column: Column, table: Table) {
+  const row_data = new Map(table.row_data)
+  for (const [key, data] of row_data.entries()) {
+    row_data.set(key, unset(column.id, data))
+  }
+  const columns = table.columns.filter((col) => col.id !== column.id)
+  return { columns, row_data }
+}
+
+type Alteration = Partial<Column> & { id: Column['id']; fill?: string }
+
+export function alterColumn(
+  { id, fill, ...changes }: Alteration,
+  table: Table
+) {
+  const columns = table.columns.map((col) =>
+    col.id === id ? { ...col, ...changes } : col
+  )
+  const newTable: Table = { ...table, columns }
+  if (fill != null) {
+    newTable.row_data = new Map(table.row_data)
+    for (const [key, data] of newTable.row_data.entries()) {
+      newTable.row_data.set(key, { ...data, [id]: fill })
+    }
+  }
+  return newTable
+}
+
+export function setCellData(
+  rowId: string,
+  col: Column,
+  newData: string,
+  table: Table
+) {
+  const row_data = new Map(table.row_data)
+  row_data.set(rowId, { ...(row_data.get(rowId) || {}), [col.id]: newData })
+  return { ...table, row_data }
+}
+
+export function deleteRowData(id: string, table: Table) {
+  const row_data = new Map(table.row_data)
+  row_data.delete(id)
+  return { ...table, row_data }
+}
+
+function unset<T, K extends keyof T>(
+  prop: K,
+  { [prop]: _remove, ...rest }: T
+): Omit<T, K> {
+  return rest
+}
+
+function getCols(ytable: YTable): YArray<YMap<string>> {
+  let cols = ytable.get(0)
+  if (!(cols instanceof YArray)) {
+    ytable.insert(0, [new YArray()])
+    cols = ytable.get(0)
+  }
+  return cols as YArray<YMap<string>>
+}
+
+function getRows(ytable: YTable): YMap<YMap<string>> {
+  let rows = ytable.get(1)
+  if (!(rows instanceof YMap)) {
+    ytable.insert(0, [new YMap()])
+    rows = ytable.get(0)
+  }
+  return rows as YMap<YMap<string>>
+}
+
+function isColumn(col: any): col is Column {
+  return col.id != null && col.name != null && col.data_type != null
+}
+
+export function parseFrom(ytable: YTable): Table {
+  let cols = getCols(ytable)
+  let rows = getRows(ytable)
+
+  const columns: Column[] = []
+  for (const col of cols) {
+    const parsedCol = {
+      id: col.get('id'),
+      name: col.get('name'),
+      data_type: col.get('data_type'),
+      default: col.get('default'),
+    }
+    if (isColumn(parsedCol)) {
+      columns.push(parsedCol)
+    }
+  }
+
+  const row_data: Table['row_data'] = new Map()
+  for (const [id, row] of rows.entries()) {
+    row_data.set(id, Object.fromEntries(row.entries()))
+  }
+
+  return { columns, row_data }
+}
+
+type YTable = YArray<YArray<YMap<string>> | YMap<YMap<string>>>
+export function syncTo(ytable: YTable, table: Table, origin?: any) {
+  let cols = getCols(ytable)
+  let rows = getRows(ytable)
+
+  if (ytable.doc == null) {
+    return false
+  }
+
+  ytable.doc.transact(() => {
+    resize(table.columns.length, () => new YMap<string>(), cols)
+
+    for (const [i, column] of table.columns.entries()) {
+      syncObject(column, cols.get(i))
+    }
+
+    for (const [key, row] of table.row_data.entries()) {
+      let map = rows.get(key)
+      if (map == null) {
+        map = new YMap()
+        rows.set(key, map)
+      }
+      syncObject(row, map)
+    }
+  }, origin)
+
+  return true
+}
+
+function syncObject(obj: Record<string, any>, yMap: YMap<any>) {
+  const existingKeys = new Set(yMap.keys())
+  for (const [key, value] of Object.entries(obj)) {
+    existingKeys.delete(key)
+    const currentValue = yMap.get(key)
+    if (currentValue !== value) {
+      yMap.set(key, value)
+    }
+  }
+
+  for (const key of existingKeys.values()) {
+    yMap.delete(key)
+  }
+}
+
+function resize<T>(
+  length: number,
+  fill: (i: number) => T,
+  arr: YArray<T>
+): YArray<T> {
+  const diff = length - arr.length
+  if (diff > 0) {
+    for (let i = 0; i < diff; i++) {
+      arr.push([fill(arr.length + i)])
+    }
+  } else if (diff < 0) {
+    arr.delete(arr.length + diff)
+  }
+  return arr
+}

From d3e702446333686ff16189983658369b42e24ca4 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:51:11 +0900
Subject: [PATCH 026/106] Editable TextCell

---
 .../organisms/Blocks/views/Table/TextCell.tsx | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 src/cloud/components/organisms/Blocks/views/Table/TextCell.tsx

diff --git a/src/cloud/components/organisms/Blocks/views/Table/TextCell.tsx b/src/cloud/components/organisms/Blocks/views/Table/TextCell.tsx
new file mode 100644
index 0000000000..39353c3131
--- /dev/null
+++ b/src/cloud/components/organisms/Blocks/views/Table/TextCell.tsx
@@ -0,0 +1,64 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { CellProps } from '.'
+import styled from '../../../../../../shared/lib/styled'
+
+interface TextCellProps extends CellProps {
+  validation?: (value: string) => boolean
+}
+
+const TextCell = ({ value, onUpdate, validation }: TextCellProps) => {
+  const [mode, setMode] = useState<'view' | 'edit'>('view')
+  const [internal, setInternal] = useState(value)
+  const [hasError, setHasError] = useState(false)
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+
+  useEffect(() => {
+    setInternal(value)
+  }, [value])
+
+  const onBlur = useCallback(() => {
+    if (validation == null || validation(internal)) {
+      onUpdate(internal)
+      setMode('view')
+    } else {
+      setHasError(true)
+    }
+  }, [onUpdate, internal])
+
+  const onChange: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(
+    (ev) => {
+      setInternal(ev.target.value)
+    },
+    []
+  )
+
+  useEffect(() => {
+    if (mode === 'edit' && textAreaRef.current != null) {
+      textAreaRef.current.focus()
+    }
+  }, [mode])
+
+  if (mode === 'view') {
+    return (
+      <StyledTextCell onClick={() => setMode('edit')}>{value}</StyledTextCell>
+    )
+  }
+
+  return (
+    <StyledTextCell className={hasError ? 'text-cell--error' : ''}>
+      <textarea
+        ref={textAreaRef}
+        onBlur={onBlur}
+        onChange={onChange}
+        value={internal}
+      />
+    </StyledTextCell>
+  )
+}
+
+export default TextCell
+
+const StyledTextCell = styled.div`
+  min-height: 20px;
+  cursor: pointer;
+`

From 050a9ec506781e5a9172574b42c9698cb3dbf1a0 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:51:24 +0900
Subject: [PATCH 027/106] HyperlinkCell

---
 .../Blocks/views/Table/HyperlinkCell.tsx         | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/cloud/components/organisms/Blocks/views/Table/HyperlinkCell.tsx

diff --git a/src/cloud/components/organisms/Blocks/views/Table/HyperlinkCell.tsx b/src/cloud/components/organisms/Blocks/views/Table/HyperlinkCell.tsx
new file mode 100644
index 0000000000..bfb440102e
--- /dev/null
+++ b/src/cloud/components/organisms/Blocks/views/Table/HyperlinkCell.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface HyperlinkCellProps {
+  href: string
+  label?: string
+}
+
+const HyperlinkCell = ({ href, label }: HyperlinkCellProps) => {
+  return (
+    <div>
+      <a href={href}>{label != null ? label : href}</a>
+    </div>
+  )
+}
+
+export default HyperlinkCell

From c3eb3693166044575b42c6bd08da02703653db18 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:51:36 +0900
Subject: [PATCH 028/106] Editable DateCell

---
 .../organisms/Blocks/views/Table/DateCell.tsx | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/cloud/components/organisms/Blocks/views/Table/DateCell.tsx

diff --git a/src/cloud/components/organisms/Blocks/views/Table/DateCell.tsx b/src/cloud/components/organisms/Blocks/views/Table/DateCell.tsx
new file mode 100644
index 0000000000..7ea16cc6dd
--- /dev/null
+++ b/src/cloud/components/organisms/Blocks/views/Table/DateCell.tsx
@@ -0,0 +1,46 @@
+import { format, isValid } from 'date-fns'
+import React, { useCallback, useMemo } from 'react'
+import DatePicker, { ReactDatePickerProps } from 'react-datepicker'
+import { CellProps } from '.'
+import styled from '../../../../../../shared/lib/styled'
+
+const DateCell = ({ value, onUpdate }: CellProps) => {
+  const date = useMemo(() => {
+    const parsed = new Date(value)
+    return isValid(parsed) ? parsed : null
+  }, [value])
+
+  const onChange: ReactDatePickerProps['onChange'] = useCallback(
+    (date) => {
+      if (date == null) {
+        onUpdate('')
+      } else if (Array.isArray(date)) {
+        onUpdate(date[0].toISOString())
+      } else {
+        onUpdate(date.toISOString())
+      }
+    },
+    [onUpdate]
+  )
+
+  return (
+    <Container>
+      <DatePicker
+        selected={date}
+        onChange={onChange}
+        popperPlacement='top-end'
+        customInput={
+          <div>
+            {date != null ? format(date, 'MMM dd, yyyy') : 'Click to add...'}
+          </div>
+        }
+      />
+    </Container>
+  )
+}
+
+export default DateCell
+
+const Container = styled.div`
+  cursor: pointer;
+`

From 37861fae15a0dd60fdee408027b415bb48b1b129 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:51:51 +0900
Subject: [PATCH 029/106] CheckboxCell

---
 .../Blocks/views/Table/CheckboxCell.tsx         | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 create mode 100644 src/cloud/components/organisms/Blocks/views/Table/CheckboxCell.tsx

diff --git a/src/cloud/components/organisms/Blocks/views/Table/CheckboxCell.tsx b/src/cloud/components/organisms/Blocks/views/Table/CheckboxCell.tsx
new file mode 100644
index 0000000000..346d448c5a
--- /dev/null
+++ b/src/cloud/components/organisms/Blocks/views/Table/CheckboxCell.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CellProps } from '.'
+import { parseBoolean } from '../../../../../lib/utils/string'
+
+const CheckboxCell = ({ value, onUpdate }: CellProps) => {
+  return (
+    <div>
+      <input
+        onChange={(ev) => onUpdate(ev.target.checked ? 'true' : 'false')}
+        type='checkbox'
+        checked={parseBoolean(value)}
+      />
+    </div>
+  )
+}
+
+export default CheckboxCell

From cc71e7fb956e41c9a5b2c069a0d3324ee118970e Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:52:36 +0900
Subject: [PATCH 030/106] Github cells

---
 .../views/Table/GithubAssigneesCell.tsx       | 26 ++++++++++++
 .../Blocks/views/Table/GithubLabelsCell.tsx   | 33 +++++++++++++++
 .../Blocks/views/Table/GithubStatusCell.tsx   | 41 +++++++++++++++++++
 3 files changed, 100 insertions(+)
 create mode 100644 src/cloud/components/organisms/Blocks/views/Table/GithubAssigneesCell.tsx
 create mode 100644 src/cloud/components/organisms/Blocks/views/Table/GithubLabelsCell.tsx
 create mode 100644 src/cloud/components/organisms/Blocks/views/Table/GithubStatusCell.tsx

diff --git a/src/cloud/components/organisms/Blocks/views/Table/GithubAssigneesCell.tsx b/src/cloud/components/organisms/Blocks/views/Table/GithubAssigneesCell.tsx
new file mode 100644
index 0000000000..2a3d6ed6d1
--- /dev/null
+++ b/src/cloud/components/organisms/Blocks/views/Table/GithubAssigneesCell.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { StyledUserIcon } from '../../../../atoms/UserIcon'
+
+interface Assignee {
+  id: number
+  avatar_url: string
+  login: string
+}
+
+interface GitHubAssigneesCellProps {
+  assignees: Assignee[]
+}
+
+const GitHubAssigneesCell = ({ assignees }: GitHubAssigneesCellProps) => {
+  return (
+    <div>
+      {assignees.map((user) => (
+        <StyledUserIcon className='subtle'>
+          <img src={user.avatar_url} alt={user.login[0]} />
+        </StyledUserIcon>
+      ))}
+    </div>
+  )
+}
+
+export default GitHubAssigneesCell
diff --git a/src/cloud/components/organisms/Blocks/views/Table/GithubLabelsCell.tsx b/src/cloud/components/organisms/Blocks/views/Table/GithubLabelsCell.tsx
new file mode 100644
index 0000000000..d60c574318
--- /dev/null
+++ b/src/cloud/components/organisms/Blocks/views/Table/GithubLabelsCell.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import styled from '../../../../../../shared/lib/styled'
+
+interface Label {
+  name: string
+  color: string
+}
+
+interface GithubLabelsCellProps {
+  labels: Label[]
+}
+
+const GithubLabelsCell = ({ labels }: GithubLabelsCellProps) => {
+  return (
+    <StyledGithubLabels>
+      {labels.map((label) => (
+        <span style={{ backgroundColor: `#${label.color}` }}>{label.name}</span>
+      ))}
+    </StyledGithubLabels>
+  )
+}
+
+const StyledGithubLabels = styled.div`
+  display: flex;
+  span {
+    margin-right: ${({ theme }) => theme.sizes.spaces.xsm}px;
+    padding: ${({ theme }) => theme.sizes.spaces.xsm}px;
+    border-radius: 5px;
+    font-size: ${({ theme }) => theme.sizes.fonts.sm}px;
+  }
+`
+
+export default GithubLabelsCell
diff --git a/src/cloud/components/organisms/Blocks/views/Table/GithubStatusCell.tsx b/src/cloud/components/organisms/Blocks/views/Table/GithubStatusCell.tsx
new file mode 100644
index 0000000000..e22b9c0fa6
--- /dev/null
+++ b/src/cloud/components/organisms/Blocks/views/Table/GithubStatusCell.tsx
@@ -0,0 +1,41 @@
+import { mdiAlertCircleCheckOutline, mdiAlertCircleOutline } from '@mdi/js'
+import React from 'react'
+import {
+  SuccessIcon,
+  WarningIcon,
+} from '../../../../../../shared/components/atoms/Icon'
+import styled from '../../../../../../shared/lib/styled'
+import { capitalize } from '../../../../../lib/utils/string'
+
+interface GithubStatusCellProps {
+  state: 'open' | 'closed'
+}
+
+const GithubStatusCell = ({ state }: GithubStatusCellProps) => {
+  return (
+    <StyledStatus>
+      {state === 'open' ? (
+        <SuccessIcon path={mdiAlertCircleOutline} />
+      ) : (
+        <WarningIcon path={mdiAlertCircleCheckOutline} />
+      )}
+      <span>{capitalize(state)}</span>
+    </StyledStatus>
+  )
+}
+
+const StyledStatus = styled.div`
+  display: flex;
+  align-items: center;
+
+  & > svg:first-child {
+    margin-right: ${({ theme }) => theme.sizes.spaces.xsm}px;
+  }
+
+  & > span {
+    flex-grow: 1;
+    text-align: left;
+  }
+`
+
+export default GithubStatusCell

From cd243b3756453e2c1375f973acdfdddb9e12da87 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:53:00 +0900
Subject: [PATCH 031/106] Editable BoostUserCell

---
 .../Blocks/views/Table/BoostUserCell.tsx      | 87 +++++++++++++++++++
 .../molecules/FilterableSelectList.tsx        | 53 +++++++++++
 2 files changed, 140 insertions(+)
 create mode 100644 src/cloud/components/organisms/Blocks/views/Table/BoostUserCell.tsx
 create mode 100644 src/design/components/molecules/FilterableSelectList.tsx

diff --git a/src/cloud/components/organisms/Blocks/views/Table/BoostUserCell.tsx b/src/cloud/components/organisms/Blocks/views/Table/BoostUserCell.tsx
new file mode 100644
index 0000000000..b564e99d52
--- /dev/null
+++ b/src/cloud/components/organisms/Blocks/views/Table/BoostUserCell.tsx
@@ -0,0 +1,87 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import { CellProps } from '.'
+import FilterableSelectList from '../../../../../../shared/components/molecules/FilterableSelectList'
+import { useModal } from '../../../../../../shared/lib/stores/modal'
+import styled from '../../../../../../shared/lib/styled'
+import { SerializedUser } from '../../../../../interfaces/db/user'
+import { usePage } from '../../../../../lib/stores/pageStore'
+import UserIcon from '../../../../atoms/UserIcon'
+
+interface BoostUserCellProps extends CellProps {}
+
+const BoostUserCell = ({ value, onUpdate }: BoostUserCellProps) => {
+  const { permissions = [] } = usePage()
+  const { openContextModal } = useModal()
+
+  const user = useMemo(() => {
+    return permissions
+      .map((perm) => perm.user)
+      .find((user) => user.id === value)
+  }, [permissions, value])
+
+  const onUpdateRef = useRef(onUpdate)
+  useEffect(() => {
+    onUpdateRef.current = onUpdate
+  }, [onUpdate])
+
+  const openSelector: React.MouseEventHandler = useCallback(
+    (ev) => {
+      openContextModal(
+        ev,
+        <UserSelect
+          users={permissions.map((perm) => perm.user)}
+          onSelect={(user) => onUpdateRef.current(user.id)}
+        />,
+        { width: 300 }
+      )
+    },
+    [permissions]
+  )
+
+  return (
+    <div onClick={openSelector}>{user != null && <UserIcon user={user} />}</div>
+  )
+}
+
+export default BoostUserCell
+
+interface UserSelectProps {
+  users: SerializedUser[]
+  onSelect: (user: SerializedUser) => void
+}
+
+const UserSelect = ({ users, onSelect }: UserSelectProps) => {
+  return (
+    <UserSelectContainer>
+      <h3>Person</h3>
+      <FilterableSelectList
+        items={users.map((user) => [
+          user.displayName,
+          <div className='user__select__item' onClick={() => onSelect(user)}>
+            <UserIcon className='user__icon' user={user} />
+            {user.displayName}
+          </div>,
+        ])}
+      />
+    </UserSelectContainer>
+  )
+}
+
+const UserSelectContainer = styled.div`
+  cursor: pointer;
+  & .user__select__item {
+    display: flex;
+    cursor: pointer;
+    padding: ${({ theme }) => theme.sizes.spaces.sm}px 0;
+    border-bottom: 1px solid ${({ theme }) => theme.colors.border.second};
+    align-items: center;
+
+    &:first-child {
+      border-top: 1px solid ${({ theme }) => theme.colors.border.second};
+    }
+
+    & .user__icon {
+      margin-right: ${({ theme }) => theme.sizes.spaces.xsm}px;
+    }
+  }
+`
diff --git a/src/design/components/molecules/FilterableSelectList.tsx b/src/design/components/molecules/FilterableSelectList.tsx
new file mode 100644
index 0000000000..9500e19574
--- /dev/null
+++ b/src/design/components/molecules/FilterableSelectList.tsx
@@ -0,0 +1,53 @@
+import React, { useState } from 'react'
+import { useI18n } from '../../../cloud/lib/hooks/useI18n'
+import { lngKeys } from '../../../cloud/lib/i18n/types'
+import styled from '../../lib/styled'
+import { AppComponent } from '../../lib/types'
+import VerticalScroller from '../atoms/VerticalScroller'
+import FormInput from './Form/atoms/FormInput'
+import FormRowItem from './Form/templates/FormRowItem'
+
+interface FilterableSelectListProps {
+  items: [string, React.ReactNode][]
+}
+
+const FilterableSelectList: AppComponent<FilterableSelectListProps> = ({
+  items,
+  className,
+}) => {
+  const [filter, setFilter] = useState('')
+  const { translate } = useI18n()
+
+  return (
+    <Container className={className}>
+      <FormRowItem>
+        <FormInput
+          value={filter}
+          onChange={(event) => setFilter(event.target.value)}
+          placeholder={translate(lngKeys.GeneralSearchVerb)}
+          id='selection__input'
+        />
+      </FormRowItem>
+      <VerticalScroller>
+        <ul>
+          {items
+            .filter(([key]) => key.includes(filter))
+            .map(([, node]) => {
+              return <li>{node}</li>
+            })}
+        </ul>
+      </VerticalScroller>
+    </Container>
+  )
+}
+
+export default FilterableSelectList
+
+const Container = styled.div`
+  & ul {
+    margin: 0;
+    margin-top: ${({ theme }) => theme.sizes.spaces.df}px;
+    list-style: none;
+    padding: 0;
+  }
+`

From 9ed579f846d28b9e64ae50043165c8becbecca63 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:53:15 +0900
Subject: [PATCH 032/106] string utils

---
 src/cloud/lib/utils/string.ts | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/src/cloud/lib/utils/string.ts b/src/cloud/lib/utils/string.ts
index ec83aedc2d..806aa12cfb 100644
--- a/src/cloud/lib/utils/string.ts
+++ b/src/cloud/lib/utils/string.ts
@@ -69,3 +69,35 @@ export function capitalize(str: string) {
 export function stringifyUrl(url: Url): string {
   return typeof url === 'string' ? url : formatUrl(url)
 }
+
+export function isUrlOrPath(str: string): boolean {
+  try {
+    new URL(str)
+    return true
+  } catch {
+    try {
+      str = str.startsWith('/') ? `http://x.yy${str}` : `http://x.yy/${str}`
+      new URL(str)
+      return true
+    } catch {
+      return false
+    }
+  }
+}
+
+export function isNumberString(str: string) {
+  return !isNaN(Number(str))
+}
+
+export function parseBoolean(str: string, deflt = false) {
+  const lower = str.toLowerCase()
+  if (lower === 'true' || lower === '1') {
+    return true
+  }
+
+  if (lower === 'false' || lower === '0') {
+    return false
+  }
+
+  return deflt
+}

From fc1cb729ea716fc17c0cab19cd8aac6be6348924 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:53:31 +0900
Subject: [PATCH 033/106] Table settings menu

---
 .../Blocks/views/Table/DataTypeMenu.tsx       |  83 ++++++++++++
 .../Blocks/views/Table/TableSettings.tsx      | 118 ++++++++++++++++++
 2 files changed, 201 insertions(+)
 create mode 100644 src/cloud/components/organisms/Blocks/views/Table/DataTypeMenu.tsx
 create mode 100644 src/cloud/components/organisms/Blocks/views/Table/TableSettings.tsx

diff --git a/src/cloud/components/organisms/Blocks/views/Table/DataTypeMenu.tsx b/src/cloud/components/organisms/Blocks/views/Table/DataTypeMenu.tsx
new file mode 100644
index 0000000000..33ea9bd462
--- /dev/null
+++ b/src/cloud/components/organisms/Blocks/views/Table/DataTypeMenu.tsx
@@ -0,0 +1,83 @@
+import {
+  mdiAccountCircleOutline,
+  mdiCalendarOutline,
+  mdiCheckboxMarkedOutline,
+  mdiLink,
+  mdiText,
+} from '@mdi/js'
+import React from 'react'
+import MetadataContainerRow from '../../../../../../shared/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
+import { DataType } from '../../../../../lib/blocks/table'
+
+interface DataTypeMenuProps {
+  onSelect: (type: DataType) => void
+}
+
+const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => {
+  return (
+    <>
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            label: 'Text',
+            onClick: () => onSelect('text'),
+            iconPath: mdiText,
+          },
+        }}
+      />
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            label: 'Number',
+            onClick: () => onSelect('number'),
+            iconPath: mdiText,
+          },
+        }}
+      />
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            label: 'Date',
+            onClick: () => onSelect('date'),
+            iconPath: mdiCalendarOutline,
+          },
+        }}
+      />
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            label: 'Person (Assignee)',
+            onClick: () => onSelect('user'),
+            iconPath: mdiAccountCircleOutline,
+          },
+        }}
+      />
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            label: 'Url',
+            onClick: () => onSelect('url'),
+            iconPath: mdiLink,
+          },
+        }}
+      />
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            label: 'Checkbox',
+            onClick: () => onSelect('checkbox'),
+            iconPath: mdiCheckboxMarkedOutline,
+          },
+        }}
+      />
+    </>
+  )
+}
+
+export default DataTypeMenu
diff --git a/src/cloud/components/organisms/Blocks/views/Table/TableSettings.tsx b/src/cloud/components/organisms/Blocks/views/Table/TableSettings.tsx
new file mode 100644
index 0000000000..819e0fe68a
--- /dev/null
+++ b/src/cloud/components/organisms/Blocks/views/Table/TableSettings.tsx
@@ -0,0 +1,118 @@
+import { flip } from 'ramda'
+import React, { useCallback, useMemo, useState } from 'react'
+import { capitalize } from '../../../../../../lib/string'
+import Switch from '../../../../../../shared/components/atoms/Switch'
+import MetadataContainerBreak from '../../../../../../shared/components/organisms/MetadataContainer/atoms/MetadataContainerBreak'
+import MetadataContainerRow from '../../../../../../shared/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
+import {
+  addColumn,
+  DataType,
+  deleteColumn,
+  Table,
+} from '../../../../../lib/blocks/table'
+import styled from '../../../../../lib/styled'
+import DataTypeMenu from './DataTypeMenu'
+
+interface TableSettingsProps {
+  table: Table
+  updateTable: (table: Table, shouldClose?: boolean) => void
+}
+
+const GITHUB_PROPS = [
+  'owner',
+  'org',
+  'repo',
+  'issue_number',
+  'body',
+  'creator',
+  'assignees',
+  'state',
+  'milestone',
+  'labels',
+  'pull_request',
+] as const
+const TableSettings = ({ table, updateTable }: TableSettingsProps) => {
+  const [internal, setInternal] = useState(table)
+
+  const activeProps = useMemo(() => {
+    return new Set(
+      internal.columns
+        .filter((col) => col.data_type === 'prop')
+        .map((col) => col.default)
+    )
+  }, [internal])
+
+  const setTable = useCallback(
+    (table: Table, shouldClose = false) => {
+      setInternal(table)
+      updateTable(table, shouldClose)
+    },
+    [updateTable]
+  )
+
+  const toggleProp = useCallback(
+    (prop: string) => {
+      const existingCols = internal.columns.filter(
+        (col) => col.data_type === 'prop' && col.default === prop
+      )
+      if (existingCols.length > 0) {
+        setTable(existingCols.reduce(flip(deleteColumn), internal))
+      } else {
+        setTable(
+          addColumn(
+            { data_type: 'prop', name: capitalize(prop), default: prop },
+            internal
+          )
+        )
+      }
+    },
+    [internal]
+  )
+
+  const insertColumn = useCallback(
+    (type: DataType) => {
+      setTable(
+        addColumn({ data_type: type, name: capitalize(type) }, internal),
+        true
+      )
+    },
+    [internal]
+  )
+
+  return (
+    <Container>
+      <MetadataContainerRow row={{ type: 'header', content: 'GITHUB' }} />
+      {GITHUB_PROPS.map((prop) => {
+        return (
+          <MetadataContainerRow
+            className='table__settings__toggle'
+            row={{
+              type: 'content',
+              label: prop,
+              content: (
+                <Switch
+                  checked={activeProps.has(prop)}
+                  onChange={() => toggleProp(prop)}
+                />
+              ),
+            }}
+          />
+        )
+      })}
+      <MetadataContainerBreak />
+      <MetadataContainerRow row={{ type: 'header', content: 'PROPERTIES' }} />
+      <DataTypeMenu onSelect={insertColumn} />
+    </Container>
+  )
+}
+
+export default TableSettings
+
+const Container = styled.div`
+  & .table__settings__toggle {
+    & .metadata__content {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+`

From a755d1f5c373090e99af4292a99393cbd3dcef77 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:54:34 +0900
Subject: [PATCH 034/106] export only styled user icon

---
 src/cloud/components/UserIcon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/cloud/components/UserIcon.tsx b/src/cloud/components/UserIcon.tsx
index 046f8f7327..ebdcff5cc5 100644
--- a/src/cloud/components/UserIcon.tsx
+++ b/src/cloud/components/UserIcon.tsx
@@ -24,7 +24,7 @@ const UserIcon = ({ user, style, className }: UserIconProps) => {
 
 export default UserIcon
 
-const StyledUserIcon = styled.div`
+export const StyledUserIcon = styled.div`
   ${userIconStyle}
   width: 30px;
   height: 30px;

From 1864fd1a80f952da750a6a98613de2b40d2b2f13 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:54:43 +0900
Subject: [PATCH 035/106] uuid dep

---
 package-lock.json | 18 +++++++++++++++---
 package.json      |  2 ++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5475c12848..b8e97110fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -96,6 +96,7 @@
         "unified": "^9.1.0",
         "unist-util-visit": "^2.0.3",
         "use-force-update": "^1.0.7",
+        "uuid": "^3.4.0",
         "webpack-bundle-analyzer": "^4.4.2",
         "y-codemirror": "^2.0.9",
         "y-websocket": "^1.3.9",
@@ -142,6 +143,7 @@
         "@types/react-select": "^4.0.11",
         "@types/shortid": "0.0.29",
         "@types/terser-webpack-plugin": "^2.2.0",
+        "@types/uuid": "^8.3.1",
         "@types/uuid-parse": "^1.0.0",
         "@types/webpack": "^4.41.24",
         "@types/webpack-dev-server": "^3.1.7",
@@ -15358,6 +15360,12 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
       "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ=="
     },
+    "node_modules/@types/uuid": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.1.tgz",
+      "integrity": "sha512-Y2mHTRAbqfFkpjldbkHGY8JIzRN6XqYRliG8/24FcHm2D2PwW24fl5xMRTVGdrb7iMrwCaIEbLWerGIkXuFWVg==",
+      "dev": true
+    },
     "node_modules/@types/uuid-parse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/uuid-parse/-/uuid-parse-1.0.0.tgz",
@@ -38280,7 +38288,6 @@
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "dev": true,
       "bin": {
         "uuid": "bin/uuid"
       }
@@ -53836,6 +53843,12 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.3.tgz",
       "integrity": "sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ=="
     },
+    "@types/uuid": {
+      "version": "8.3.1",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.1.tgz",
+      "integrity": "sha512-Y2mHTRAbqfFkpjldbkHGY8JIzRN6XqYRliG8/24FcHm2D2PwW24fl5xMRTVGdrb7iMrwCaIEbLWerGIkXuFWVg==",
+      "dev": true
+    },
     "@types/uuid-parse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/uuid-parse/-/uuid-parse-1.0.0.tgz",
@@ -73018,8 +73031,7 @@
     "uuid": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "dev": true
+      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
     },
     "uuid-browser": {
       "version": "3.1.0",
diff --git a/package.json b/package.json
index 74163dfac8..f799ae120b 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "@types/react-select": "^4.0.11",
     "@types/shortid": "0.0.29",
     "@types/terser-webpack-plugin": "^2.2.0",
+    "@types/uuid": "^8.3.1",
     "@types/uuid-parse": "^1.0.0",
     "@types/webpack": "^4.41.24",
     "@types/webpack-dev-server": "^3.1.7",
@@ -212,6 +213,7 @@
     "unified": "^9.1.0",
     "unist-util-visit": "^2.0.3",
     "use-force-update": "^1.0.7",
+    "uuid": "^3.4.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "y-codemirror": "^2.0.9",
     "y-websocket": "^1.3.9",

From 7f23ddd3a761b26cada03025ffe95d103cc24083 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:55:05 +0900
Subject: [PATCH 036/106] column settings

---
 .../Blocks/views/Table/ColumnSettings.tsx     | 125 ++++++++++++++++++
 src/design/lib/stores/modal/store.ts          |  11 +-
 2 files changed, 135 insertions(+), 1 deletion(-)
 create mode 100644 src/cloud/components/organisms/Blocks/views/Table/ColumnSettings.tsx

diff --git a/src/cloud/components/organisms/Blocks/views/Table/ColumnSettings.tsx b/src/cloud/components/organisms/Blocks/views/Table/ColumnSettings.tsx
new file mode 100644
index 0000000000..701f289a85
--- /dev/null
+++ b/src/cloud/components/organisms/Blocks/views/Table/ColumnSettings.tsx
@@ -0,0 +1,125 @@
+import {
+  mdiAccountCircleOutline,
+  mdiArrowLeftBold,
+  mdiArrowRightBold,
+  mdiTrashCanOutline,
+} from '@mdi/js'
+import React, { useCallback, useState } from 'react'
+import FormInput from '../../../../../../shared/components/molecules/Form/atoms/FormInput'
+import MetadataContainerBreak from '../../../../../../shared/components/organisms/MetadataContainer/atoms/MetadataContainerBreak'
+import MetadataContainerRow from '../../../../../../shared/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
+import { useModal } from '../../../../../../shared/lib/stores/modal'
+import styled from '../../../../../../shared/lib/styled'
+import { Column, DataType } from '../../../../../lib/blocks/table'
+import { capitalize } from '../../../../../lib/utils/string'
+import DataTypeMenu from './DataTypeMenu'
+
+interface ColumnSettingsProps {
+  col: Column
+  setColName: (name: string, col: Column) => void
+  setColDataType: (type: DataType, col: Column) => void
+  deleteCol: (col: Column) => void
+  moveColumn: (col: Column, direction: 'left' | 'right') => void
+}
+
+const ColumnSettings = ({
+  col,
+  setColName,
+  setColDataType,
+  deleteCol,
+  moveColumn,
+}: ColumnSettingsProps) => {
+  const [name, setName] = useState(col.name)
+  const { openContextModal, closeAllModals } = useModal()
+
+  const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    (ev) => {
+      setName(ev.target.value)
+      setColName(ev.target.value, col)
+    },
+    [col]
+  )
+
+  const openTypeSelector: React.MouseEventHandler = useCallback(
+    (ev) => {
+      openContextModal(
+        ev,
+        <DataTypeMenu
+          onSelect={(type) => {
+            setColDataType(type, col)
+            closeAllModals()
+          }}
+        />,
+        { width: 300, keepAll: true }
+      )
+    },
+    [col]
+  )
+
+  return (
+    <Container>
+      <MetadataContainerRow row={{ type: 'header', content: 'NAME' }} />
+      <FormInput value={name} onChange={onChange} />
+      <MetadataContainerRow
+        row={{
+          type: 'header',
+          content:
+            col.data_type === 'prop' ? 'GITHUB PARAMETER' : 'PROPERTY TYPE',
+        }}
+      />
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            label: capitalize(col.data_type),
+            iconPath: mdiAccountCircleOutline,
+            onClick: openTypeSelector,
+          },
+        }}
+      />
+      <MetadataContainerBreak />
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            label: 'Move left',
+            iconPath: mdiArrowLeftBold,
+            onClick: () => moveColumn(col, 'left'),
+          },
+        }}
+      />
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            label: 'Move right',
+            iconPath: mdiArrowRightBold,
+            onClick: () => moveColumn(col, 'right'),
+          },
+        }}
+      />
+      <MetadataContainerRow
+        row={{
+          type: 'button',
+          props: {
+            label: 'Delete',
+            iconPath: mdiTrashCanOutline,
+            onClick: () => deleteCol(col),
+          },
+        }}
+      />
+    </Container>
+  )
+}
+
+export default ColumnSettings
+
+const Container = styled.div`
+  & .table__column__settings__type {
+    position: relative;
+    & > .table__column__settings__type__wrapper {
+      position: absolute;
+      left: 100%;
+    }
+  }
+`
diff --git a/src/design/lib/stores/modal/store.ts b/src/design/lib/stores/modal/store.ts
index d087ebb226..1d070782f9 100644
--- a/src/design/lib/stores/modal/store.ts
+++ b/src/design/lib/stores/modal/store.ts
@@ -30,7 +30,16 @@ function useModalStore(): ModalsContext {
           alignment: options.alignment || 'bottom-left',
         },
       }
-      setModals([modal])
+
+      if (!options.keepAll) {
+        setModals([modal])
+      } else {
+        setModals((prev) => {
+          const newArray = prev.slice()
+          newArray.push(modal)
+          return newArray
+        })
+      }
     },
     []
   )

From 4f5f2ef4d2c151007419a78398972c9798208dc4 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 14:55:27 +0900
Subject: [PATCH 037/106] update table component to use data cells

---
 src/cloud/components/Blocks/views/Table.tsx   |  88 -----
 .../Blocks/views/Table/BoostUserCell.tsx      |  12 +-
 .../Blocks/views/Table/CheckboxCell.tsx       |   2 +-
 .../Blocks/views/Table/ColumnSettings.tsx     |  14 +-
 .../Blocks/views/Table/DataTypeMenu.tsx       |   4 +-
 .../Blocks/views/Table/DateCell.tsx           |   2 +-
 .../views/Table/GithubAssigneesCell.tsx       |   2 +-
 .../Blocks/views/Table/GithubLabelsCell.tsx   |   2 +-
 .../Blocks/views/Table/GithubStatusCell.tsx   |   6 +-
 .../Blocks/views/Table/HyperlinkCell.tsx      |   0
 .../Blocks/views/Table/TableSettings.tsx      |  12 +-
 .../Blocks/views/Table/TextCell.tsx           |   2 +-
 .../components/Blocks/views/Table/index.tsx   | 353 ++++++++++++++++++
 .../components/organisms/DocPage/Edit.tsx     |  62 ---
 14 files changed, 382 insertions(+), 179 deletions(-)
 delete mode 100644 src/cloud/components/Blocks/views/Table.tsx
 rename src/cloud/components/{organisms => }/Blocks/views/Table/BoostUserCell.tsx (83%)
 rename src/cloud/components/{organisms => }/Blocks/views/Table/CheckboxCell.tsx (84%)
 rename src/cloud/components/{organisms => }/Blocks/views/Table/ColumnSettings.tsx (82%)
 rename src/cloud/components/{organisms => }/Blocks/views/Table/DataTypeMenu.tsx (90%)
 rename src/cloud/components/{organisms => }/Blocks/views/Table/DateCell.tsx (94%)
 rename src/cloud/components/{organisms => }/Blocks/views/Table/GithubAssigneesCell.tsx (89%)
 rename src/cloud/components/{organisms => }/Blocks/views/Table/GithubLabelsCell.tsx (92%)
 rename src/cloud/components/{organisms => }/Blocks/views/Table/GithubStatusCell.tsx (81%)
 rename src/cloud/components/{organisms => }/Blocks/views/Table/HyperlinkCell.tsx (100%)
 rename src/cloud/components/{organisms => }/Blocks/views/Table/TableSettings.tsx (84%)
 rename src/cloud/components/{organisms => }/Blocks/views/Table/TextCell.tsx (96%)
 create mode 100644 src/cloud/components/Blocks/views/Table/index.tsx
 delete mode 100644 src/cloud/components/organisms/DocPage/Edit.tsx

diff --git a/src/cloud/components/Blocks/views/Table.tsx b/src/cloud/components/Blocks/views/Table.tsx
deleted file mode 100644
index c66ee881f7..0000000000
--- a/src/cloud/components/Blocks/views/Table.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React, { useCallback } from 'react'
-import { ViewProps } from '../BlockContent'
-import { mdiPlus } from '@mdi/js'
-import GithubIssueForm from '../forms/GithubIssueForm'
-import { TableBlock } from '../../../api/blocks'
-import { useModal } from '../../../../design/lib/stores/modal'
-import Button from '../../../../design/components/atoms/Button'
-import styled from '../../../../design/lib/styled'
-
-const TableView = ({ block, actions }: ViewProps<TableBlock>) => {
-  const { openModal } = useModal()
-
-  const importIssues = useCallback(() => {
-    openModal(
-      <GithubIssueForm
-        onSubmit={(issueBlock) => {
-          return actions.create(issueBlock, block)
-        }}
-      />,
-      {
-        width: 'large',
-        showCloseIcon: true,
-      }
-    )
-  }, [openModal, actions, block])
-
-  return (
-    <StyledTableView>
-      <table>
-        <thead>
-          <tr>
-            <th>Title</th>
-            <td>Assignees</td>
-            <th>Status</th>
-            <th>Labels</th>
-            <th>Linked PR</th>
-          </tr>
-        </thead>
-        <tbody>
-          {block.children.map(({ data }) => {
-            return (
-              <tr key={data.id}>
-                <td>{data.title}</td>
-                <td>
-                  {data.assignees
-                    .map((assignee: any) => assignee.login)
-                    .join(', ')}
-                </td>
-                <td>{data.state}</td>
-                <td>
-                  {data.labels.map((label: any) => label.name).join(', ')}
-                </td>
-                <td>
-                  {data.pull_request != null && data.pull_request.html_url}
-                </td>
-              </tr>
-            )
-          })}
-        </tbody>
-      </table>
-      <div className='block__table__view__import'>
-        <Button onClick={importIssues} variant='transparent' iconPath={mdiPlus}>
-          Import
-        </Button>
-      </div>
-    </StyledTableView>
-  )
-}
-
-const StyledTableView = styled.div`
-  & table {
-    width: 100%;
-    text-align: left;
-    border-collapse: collapse;
-  }
-
-  & td,
-  th {
-    border: 1px solid ${({ theme }) => theme.colors.border.main};
-    padding: ${({ theme }) => theme.sizes.spaces.sm}px;
-  }
-
-  & .block__table__view__import {
-    border-bottom: 1px solid ${({ theme }) => theme.colors.border.main};
-  }
-`
-
-export default TableView
diff --git a/src/cloud/components/organisms/Blocks/views/Table/BoostUserCell.tsx b/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
similarity index 83%
rename from src/cloud/components/organisms/Blocks/views/Table/BoostUserCell.tsx
rename to src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
index b564e99d52..af77d8f435 100644
--- a/src/cloud/components/organisms/Blocks/views/Table/BoostUserCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
@@ -1,11 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { CellProps } from '.'
-import FilterableSelectList from '../../../../../../shared/components/molecules/FilterableSelectList'
-import { useModal } from '../../../../../../shared/lib/stores/modal'
-import styled from '../../../../../../shared/lib/styled'
-import { SerializedUser } from '../../../../../interfaces/db/user'
-import { usePage } from '../../../../../lib/stores/pageStore'
-import UserIcon from '../../../../atoms/UserIcon'
+import FilterableSelectList from '../../../../../design/components/molecules/FilterableSelectList'
+import { useModal } from '../../../../../design/lib/stores/modal'
+import styled from '../../../../../design/lib/styled'
+import { SerializedUser } from '../../../../interfaces/db/user'
+import { usePage } from '../../../../lib/stores/pageStore'
+import UserIcon from '../../../UserIcon'
 
 interface BoostUserCellProps extends CellProps {}
 
diff --git a/src/cloud/components/organisms/Blocks/views/Table/CheckboxCell.tsx b/src/cloud/components/Blocks/views/Table/CheckboxCell.tsx
similarity index 84%
rename from src/cloud/components/organisms/Blocks/views/Table/CheckboxCell.tsx
rename to src/cloud/components/Blocks/views/Table/CheckboxCell.tsx
index 346d448c5a..deb13104cd 100644
--- a/src/cloud/components/organisms/Blocks/views/Table/CheckboxCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/CheckboxCell.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { CellProps } from '.'
-import { parseBoolean } from '../../../../../lib/utils/string'
+import { parseBoolean } from '../../../../lib/utils/string'
 
 const CheckboxCell = ({ value, onUpdate }: CellProps) => {
   return (
diff --git a/src/cloud/components/organisms/Blocks/views/Table/ColumnSettings.tsx b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
similarity index 82%
rename from src/cloud/components/organisms/Blocks/views/Table/ColumnSettings.tsx
rename to src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
index 701f289a85..4be13c78c6 100644
--- a/src/cloud/components/organisms/Blocks/views/Table/ColumnSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
@@ -5,13 +5,13 @@ import {
   mdiTrashCanOutline,
 } from '@mdi/js'
 import React, { useCallback, useState } from 'react'
-import FormInput from '../../../../../../shared/components/molecules/Form/atoms/FormInput'
-import MetadataContainerBreak from '../../../../../../shared/components/organisms/MetadataContainer/atoms/MetadataContainerBreak'
-import MetadataContainerRow from '../../../../../../shared/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
-import { useModal } from '../../../../../../shared/lib/stores/modal'
-import styled from '../../../../../../shared/lib/styled'
-import { Column, DataType } from '../../../../../lib/blocks/table'
-import { capitalize } from '../../../../../lib/utils/string'
+import FormInput from '../../../../../design/components/molecules/Form/atoms/FormInput'
+import MetadataContainerBreak from '../../../../../design/components/organisms/MetadataContainer/atoms/MetadataContainerBreak'
+import MetadataContainerRow from '../../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
+import { useModal } from '../../../../../design/lib/stores/modal'
+import styled from '../../../../../design/lib/styled'
+import { Column, DataType } from '../../../../lib/blocks/table'
+import { capitalize } from '../../../../lib/utils/string'
 import DataTypeMenu from './DataTypeMenu'
 
 interface ColumnSettingsProps {
diff --git a/src/cloud/components/organisms/Blocks/views/Table/DataTypeMenu.tsx b/src/cloud/components/Blocks/views/Table/DataTypeMenu.tsx
similarity index 90%
rename from src/cloud/components/organisms/Blocks/views/Table/DataTypeMenu.tsx
rename to src/cloud/components/Blocks/views/Table/DataTypeMenu.tsx
index 33ea9bd462..1311f058f8 100644
--- a/src/cloud/components/organisms/Blocks/views/Table/DataTypeMenu.tsx
+++ b/src/cloud/components/Blocks/views/Table/DataTypeMenu.tsx
@@ -6,8 +6,8 @@ import {
   mdiText,
 } from '@mdi/js'
 import React from 'react'
-import MetadataContainerRow from '../../../../../../shared/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
-import { DataType } from '../../../../../lib/blocks/table'
+import MetadataContainerRow from '../../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
+import { DataType } from '../../../../lib/blocks/table'
 
 interface DataTypeMenuProps {
   onSelect: (type: DataType) => void
diff --git a/src/cloud/components/organisms/Blocks/views/Table/DateCell.tsx b/src/cloud/components/Blocks/views/Table/DateCell.tsx
similarity index 94%
rename from src/cloud/components/organisms/Blocks/views/Table/DateCell.tsx
rename to src/cloud/components/Blocks/views/Table/DateCell.tsx
index 7ea16cc6dd..8e94ab3016 100644
--- a/src/cloud/components/organisms/Blocks/views/Table/DateCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/DateCell.tsx
@@ -2,7 +2,7 @@ import { format, isValid } from 'date-fns'
 import React, { useCallback, useMemo } from 'react'
 import DatePicker, { ReactDatePickerProps } from 'react-datepicker'
 import { CellProps } from '.'
-import styled from '../../../../../../shared/lib/styled'
+import styled from '../../../../../design/lib/styled'
 
 const DateCell = ({ value, onUpdate }: CellProps) => {
   const date = useMemo(() => {
diff --git a/src/cloud/components/organisms/Blocks/views/Table/GithubAssigneesCell.tsx b/src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx
similarity index 89%
rename from src/cloud/components/organisms/Blocks/views/Table/GithubAssigneesCell.tsx
rename to src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx
index 2a3d6ed6d1..8111384d75 100644
--- a/src/cloud/components/organisms/Blocks/views/Table/GithubAssigneesCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyledUserIcon } from '../../../../atoms/UserIcon'
+import { StyledUserIcon } from '../../../UserIcon'
 
 interface Assignee {
   id: number
diff --git a/src/cloud/components/organisms/Blocks/views/Table/GithubLabelsCell.tsx b/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
similarity index 92%
rename from src/cloud/components/organisms/Blocks/views/Table/GithubLabelsCell.tsx
rename to src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
index d60c574318..cef961fb1a 100644
--- a/src/cloud/components/organisms/Blocks/views/Table/GithubLabelsCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from '../../../../../../shared/lib/styled'
+import styled from '../../../../../design/lib/styled'
 
 interface Label {
   name: string
diff --git a/src/cloud/components/organisms/Blocks/views/Table/GithubStatusCell.tsx b/src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx
similarity index 81%
rename from src/cloud/components/organisms/Blocks/views/Table/GithubStatusCell.tsx
rename to src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx
index e22b9c0fa6..ed10d2fcf8 100644
--- a/src/cloud/components/organisms/Blocks/views/Table/GithubStatusCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx
@@ -3,9 +3,9 @@ import React from 'react'
 import {
   SuccessIcon,
   WarningIcon,
-} from '../../../../../../shared/components/atoms/Icon'
-import styled from '../../../../../../shared/lib/styled'
-import { capitalize } from '../../../../../lib/utils/string'
+} from '../../../../../design/components/atoms/Icon'
+import styled from '../../../../../design/lib/styled'
+import { capitalize } from '../../../../lib/utils/string'
 
 interface GithubStatusCellProps {
   state: 'open' | 'closed'
diff --git a/src/cloud/components/organisms/Blocks/views/Table/HyperlinkCell.tsx b/src/cloud/components/Blocks/views/Table/HyperlinkCell.tsx
similarity index 100%
rename from src/cloud/components/organisms/Blocks/views/Table/HyperlinkCell.tsx
rename to src/cloud/components/Blocks/views/Table/HyperlinkCell.tsx
diff --git a/src/cloud/components/organisms/Blocks/views/Table/TableSettings.tsx b/src/cloud/components/Blocks/views/Table/TableSettings.tsx
similarity index 84%
rename from src/cloud/components/organisms/Blocks/views/Table/TableSettings.tsx
rename to src/cloud/components/Blocks/views/Table/TableSettings.tsx
index 819e0fe68a..e08cdc0d21 100644
--- a/src/cloud/components/organisms/Blocks/views/Table/TableSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/TableSettings.tsx
@@ -1,16 +1,16 @@
 import { flip } from 'ramda'
 import React, { useCallback, useMemo, useState } from 'react'
-import { capitalize } from '../../../../../../lib/string'
-import Switch from '../../../../../../shared/components/atoms/Switch'
-import MetadataContainerBreak from '../../../../../../shared/components/organisms/MetadataContainer/atoms/MetadataContainerBreak'
-import MetadataContainerRow from '../../../../../../shared/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
+import Switch from '../../../../../design/components/atoms/Switch'
+import MetadataContainerBreak from '../../../../../design/components/organisms/MetadataContainer/atoms/MetadataContainerBreak'
+import MetadataContainerRow from '../../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
+import styled from '../../../../../design/lib/styled'
 import {
   addColumn,
   DataType,
   deleteColumn,
   Table,
-} from '../../../../../lib/blocks/table'
-import styled from '../../../../../lib/styled'
+} from '../../../../lib/blocks/table'
+import { capitalize } from '../../../../lib/utils/string'
 import DataTypeMenu from './DataTypeMenu'
 
 interface TableSettingsProps {
diff --git a/src/cloud/components/organisms/Blocks/views/Table/TextCell.tsx b/src/cloud/components/Blocks/views/Table/TextCell.tsx
similarity index 96%
rename from src/cloud/components/organisms/Blocks/views/Table/TextCell.tsx
rename to src/cloud/components/Blocks/views/Table/TextCell.tsx
index 39353c3131..f722db9ca7 100644
--- a/src/cloud/components/organisms/Blocks/views/Table/TextCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/TextCell.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { CellProps } from '.'
-import styled from '../../../../../../shared/lib/styled'
+import styled from '../../../../../design/lib/styled'
 
 interface TextCellProps extends CellProps {
   validation?: (value: string) => boolean
diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
new file mode 100644
index 0000000000..5c1117de8c
--- /dev/null
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -0,0 +1,353 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { ViewProps } from '../../BlockContent'
+import { mdiCog, mdiPlus } from '@mdi/js'
+import GithubIssueForm from '../../forms/GithubIssueForm'
+import {
+  alterColumn,
+  Column,
+  deleteColumn,
+  moveColumn,
+  parseFrom,
+  setCellData,
+  syncTo,
+} from '../../../../lib/blocks/table'
+import TextCell from './TextCell'
+import CheckboxCell from './CheckboxCell'
+import DateCell from './DateCell'
+import GitHubAssigneesCell from './GithubAssigneesCell'
+import GithubStatusCell from './GithubStatusCell'
+import GithubLabelsCell from './GithubLabelsCell'
+import HyperlinkCell from './HyperlinkCell'
+import TableSettings from './TableSettings'
+import ColumnSettings from './ColumnSettings'
+import BoostUserCell from './BoostUserCell'
+import { TableBlock } from '../../../../api/blocks'
+import { useModal } from '../../../../../design/lib/stores/modal'
+import Icon from '../../../../../design/components/atoms/Icon'
+import Button from '../../../../../design/components/atoms/Button'
+import { isNumberString, isUrlOrPath } from '../../../../lib/utils/string'
+import styled from '../../../../../design/lib/styled'
+
+export interface CellProps {
+  value: string
+  onUpdate: (val: string) => Promise<void> | void
+}
+
+const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
+  const { openModal, openContextModal, closeAllModals } = useModal()
+  const realtimeRef = useRef(realtime.doc.getArray(block.id))
+  const [table, setTable] = useState(() => {
+    const arr = realtime.doc.getArray(block.id)
+    return parseFrom(arr as ArgsType<typeof parseFrom>[0])
+  })
+  const originRef = useRef({})
+
+  useEffect(() => {
+    const yarray = realtime.doc.getArray(block.id)
+    const listener: ArgsType<typeof yarray['observeDeep']>[0] = (_ev, tr) => {
+      if (tr.origin !== originRef.current) {
+        setTable(parseFrom(yarray as ArgsType<typeof parseFrom>[0]))
+      }
+    }
+    yarray.observeDeep(listener)
+    realtimeRef.current = yarray
+    return () => {
+      yarray.unobserveDeep(listener)
+    }
+  }, [realtime])
+
+  useEffect(() => {
+    syncTo(realtimeRef.current as any, table, originRef.current)
+  }, [table])
+
+  const openTableSettings: React.MouseEventHandler = useCallback(
+    (ev) => {
+      openContextModal(
+        ev,
+        <TableSettings
+          table={table}
+          updateTable={(table, shouldClose) => {
+            setTable(table)
+            if (shouldClose) {
+              closeAllModals()
+            }
+          }}
+        />,
+        { alignment: 'bottom-right' }
+      )
+    },
+    [openContextModal, table]
+  )
+
+  const openColumnSettings = useCallback(
+    (ev: React.MouseEvent, col: Column) => {
+      openContextModal(
+        ev,
+        <ColumnSettings
+          col={col}
+          setColName={(name, col) =>
+            setTable((table) => alterColumn({ ...col, name }, table))
+          }
+          setColDataType={(data_type, col) =>
+            setTable((table) => alterColumn({ ...col, data_type }, table))
+          }
+          deleteCol={(col) => {
+            setTable((table) => deleteColumn(col, table))
+            closeAllModals()
+          }}
+          moveColumn={(col, dir) => {
+            setTable((table) => {
+              const index = table.columns.findIndex(
+                (column) => column.id === col.id
+              )
+              const target = dir === 'left' ? index - 1 : index + 1
+              return index > -1 ? moveColumn(target, col, table) : table
+            })
+          }}
+        />,
+        { width: 220 }
+      )
+    },
+    []
+  )
+
+  const importIssues = useCallback(() => {
+    openModal(
+      <GithubIssueForm
+        onSubmit={(issueBlock) => {
+          return actions.create(issueBlock, block)
+        }}
+      />,
+      {
+        width: 'large',
+        showCloseIcon: true,
+      }
+    )
+  }, [openModal, actions, block])
+
+  const updateCell = useCallback((rowId: string, col: Column, data: string) => {
+    setTable((table) => setCellData(rowId, col, data, table))
+  }, [])
+
+  return (
+    <StyledTableView>
+      <div className='block__table__view__wrapper'>
+        <table>
+          <thead>
+            <tr>
+              <th>Title</th>
+              {table.columns.map((col) => (
+                <th
+                  className='block__table__view--interactable'
+                  onClick={(ev) => openColumnSettings(ev, col)}
+                >
+                  {col.name}
+                </th>
+              ))}
+              <th
+                onClick={openTableSettings}
+                className='block__table__view--no-borders block__table__view--interactable'
+              >
+                <Icon path={mdiCog} />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {block.children.map((child) => {
+              return (
+                <tr key={child.id}>
+                  <td>
+                    <div>{child.data.title}</div>
+                  </td>
+                  {table.columns.map((col) => (
+                    <td key={col.id}>
+                      <TableCell
+                        column={col}
+                        row={child}
+                        data={table.row_data.get(child.id) || {}}
+                        updateCell={updateCell}
+                      />
+                    </td>
+                  ))}
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+      <div className='block__table__view__import'>
+        <Button onClick={importIssues} variant='transparent' iconPath={mdiPlus}>
+          Import
+        </Button>
+      </div>
+    </StyledTableView>
+  )
+}
+
+interface TableCellProps {
+  column: Column
+  row: TableBlock['children'][number]
+  data: Record<string, string>
+  updateCell: (
+    rowId: string,
+    column: Column,
+    value: string
+  ) => Promise<void> | void
+}
+
+const TableCell = ({ column, row, data, updateCell }: TableCellProps) => {
+  const update = useCallback(
+    (value: string) => {
+      updateCell(row.id, column, value)
+    },
+    [column, row, updateCell]
+  )
+
+  switch (column.data_type) {
+    case 'prop':
+      return <GithubCell prop={column.default || ''} data={row.data} />
+    case 'number':
+      return (
+        <TextCell
+          value={data[column.id] || ''}
+          onUpdate={update}
+          validation={isNumberString}
+        />
+      )
+    case 'date':
+      return <DateCell value={data[column.id] || ''} onUpdate={update} />
+    case 'url':
+      return (
+        <TextCell
+          value={data[column.id] || ''}
+          onUpdate={update}
+          validation={isUrlOrPath}
+        />
+      )
+    case 'checkbox':
+      return <CheckboxCell value={data[column.id] || ''} onUpdate={update} />
+    case 'user':
+      return <BoostUserCell value={data[column.id] || ''} onUpdate={update} />
+    case 'text':
+    default:
+      return <TextCell value={data[column.id] || ''} onUpdate={update} />
+  }
+}
+
+interface GithubCell {
+  prop: string
+  data: any
+}
+
+const GithubCell = ({ prop, data }: GithubCell) => {
+  switch (prop) {
+    case 'assignees':
+      return <GitHubAssigneesCell assignees={data.assignees || []} />
+    case 'owner':
+      return data.repository != null ? (
+        <GitHubAssigneesCell assignees={[data.repository.owner]} />
+      ) : null
+    case 'creator':
+      return data.milestone != null ? (
+        <GitHubAssigneesCell assignees={[data.milestone.creator]} />
+      ) : null
+    case 'state':
+      return <GithubStatusCell state={data.state} />
+    case 'labels':
+      return <GithubLabelsCell labels={data.labels || []} />
+    case 'pull_request':
+      const url = data?.pull_request?.html_url || ''
+      return <HyperlinkCell href={url} label={getPRNumFromUrl(url)} />
+    case 'org':
+      return <HyperlinkCell href={''} />
+    case 'repo':
+      return (
+        <HyperlinkCell
+          href={data?.repository?.html_url}
+          label={data?.repository?.full_name}
+        />
+      )
+    case 'issue_number':
+      return <div>#{data.number}</div>
+    case 'body':
+      return <div>{data.body}</div>
+    case 'milestone':
+      return (
+        <HyperlinkCell
+          href={data?.milestone?.html_url || ''}
+          label={data?.milestone?.title}
+        />
+      )
+    default:
+      return null
+  }
+}
+
+function getPRNumFromUrl(url: string) {
+  const num = url.split('/').pop()
+  return num != null && num !== '' ? `#${num}` : url
+}
+
+const StyledTableView = styled.div`
+  position: relative;
+
+  & .block__table__view--interactable {
+    cursor: pointer;
+    &:hover {
+      color: ${({ theme }) => theme.colors.text.primary};
+    }
+  }
+
+  & .block__table__view__wrapper {
+    width: 100%;
+    overflow-x: auto;
+  }
+
+  & table {
+    width: 100%;
+    text-align: left;
+    border-collapse: separate;
+  }
+
+  & td:first-child,
+  th:first-child {
+    width: 400px;
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+
+  & td > div {
+    height: 100%;
+    width: 100%;
+  }
+
+  & .block__table__view--no-borders {
+    border: none;
+  }
+
+  & th {
+    color: ${({ theme }) => theme.colors.text.secondary};
+    border-top: 1px solid ${({ theme }) => theme.colors.border.main};
+  }
+
+  & td {
+    min-width: 130px;
+    min-height: 20px;
+  }
+
+  & td,
+  th {
+    width: 130px;
+    border-right: 1px solid ${({ theme }) => theme.colors.border.main};
+    border-bottom: 1px solid ${({ theme }) => theme.colors.border.main};
+    padding: ${({ theme }) => theme.sizes.spaces.sm}px;
+  }
+
+  & .block__table__view__import {
+    border-bottom: 1px solid ${({ theme }) => theme.colors.border.main};
+  }
+`
+
+export default TableView
diff --git a/src/cloud/components/organisms/DocPage/Edit.tsx b/src/cloud/components/organisms/DocPage/Edit.tsx
deleted file mode 100644
index e90814f043..0000000000
--- a/src/cloud/components/organisms/DocPage/Edit.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react'
-import {
-  SerializedDocWithBookmark,
-  SerializedDoc,
-} from '../../../interfaces/db/doc'
-import Editor from '../../molecules/Editor'
-import { SerializedTeam } from '../../../interfaces/db/team'
-import { SerializedUser } from '../../../interfaces/db/user'
-import styled from '../../../lib/styled'
-import { rightSideTopBarHeight } from '../RightSideTopBar/styled'
-import { SerializedRevision } from '../../../interfaces/db/revision'
-import BlockEditor from '../Blocks/BlockEditor'
-
-interface EditPageProps {
-  doc: SerializedDocWithBookmark
-  team: SerializedTeam
-  user: SerializedUser
-  contributors: SerializedUser[]
-  revisionHistory: SerializedRevision[]
-  backLinks: SerializedDoc[]
-}
-
-const EditPage = ({
-  doc,
-  team,
-  user,
-  contributors,
-  revisionHistory,
-  backLinks,
-}: EditPageProps) => {
-  return (
-    <StyledDocEditPage>
-      {doc.rootBlock == null ? (
-        <Editor
-          team={team}
-          doc={doc}
-          user={user}
-          contributors={contributors}
-          backLinks={backLinks}
-          revisionHistory={revisionHistory}
-        />
-      ) : (
-        <BlockEditor doc={doc as any} />
-      )}
-    </StyledDocEditPage>
-  )
-}
-
-const StyledDocEditPage = styled.div`
-  margin: 0;
-  padding: 0;
-  padding-top: ${rightSideTopBarHeight}px;
-  min-height: calc(100vh - ${rightSideTopBarHeight}px);
-  height: auto;
-  display: flex;
-
-  .cm-link {
-    text-decoration: none;
-  }
-`
-
-export default EditPage

From b459b32381c591c542fdf825bc97791ea1f586e7 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Mon, 23 Aug 2021 17:40:57 +0900
Subject: [PATCH 038/106] BoostUserCell min-size

---
 .../components/Blocks/views/Table/BoostUserCell.tsx    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx b/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
index af77d8f435..9d4ef61037 100644
--- a/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
@@ -39,12 +39,19 @@ const BoostUserCell = ({ value, onUpdate }: BoostUserCellProps) => {
   )
 
   return (
-    <div onClick={openSelector}>{user != null && <UserIcon user={user} />}</div>
+    <Container onClick={openSelector}>
+      {user != null && <UserIcon user={user} />}
+    </Container>
   )
 }
 
 export default BoostUserCell
 
+const Container = styled.div`
+  cursor: pointer;
+  min-height: 40px;
+`
+
 interface UserSelectProps {
   users: SerializedUser[]
   onSelect: (user: SerializedUser) => void
@@ -68,7 +75,6 @@ const UserSelect = ({ users, onSelect }: UserSelectProps) => {
 }
 
 const UserSelectContainer = styled.div`
-  cursor: pointer;
   & .user__select__item {
     display: flex;
     cursor: pointer;

From e46b3dd9ea75fd89cd5505f9568323a9d3c0ab7c Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 24 Aug 2021 09:03:56 +0900
Subject: [PATCH 039/106] include repo in issue data

---
 src/cloud/components/Blocks/views/Table/BoostUserCell.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx b/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
index 9d4ef61037..3b7eedd9fc 100644
--- a/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
@@ -45,8 +45,6 @@ const BoostUserCell = ({ value, onUpdate }: BoostUserCellProps) => {
   )
 }
 
-export default BoostUserCell
-
 const Container = styled.div`
   cursor: pointer;
   min-height: 40px;
@@ -91,3 +89,5 @@ const UserSelectContainer = styled.div`
     }
   }
 `
+
+export default BoostUserCell

From 5c3fe266d06ea168353978cf9c60ecd9f7e425f5 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 25 Aug 2021 16:17:29 +0900
Subject: [PATCH 040/106] new integration actions

---
 src/cloud/api/integrations/index.ts | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/cloud/api/integrations/index.ts b/src/cloud/api/integrations/index.ts
index 9f08fd9e02..e0cc2c25a7 100644
--- a/src/cloud/api/integrations/index.ts
+++ b/src/cloud/api/integrations/index.ts
@@ -30,10 +30,17 @@ export interface IntegrationActionTypes {
     }
   }[]
   ['repo:issues']: any[]
+  ['repo:labels']: {
+    id: number
+    name: string
+    color: string
+    description: string
+  }[]
+  ['repo:collaborators']: { id: number; avatar_url: string; login: string }[]
 }
 
 export async function getAction<A extends keyof IntegrationActionTypes>(
-  integration: SerializedTeamIntegration,
+  integration: Pick<SerializedTeamIntegration, 'id'>,
   action: A,
   args?: Record<string, any>
 ): Promise<IntegrationActionTypes[A]> {
@@ -42,3 +49,22 @@ export async function getAction<A extends keyof IntegrationActionTypes>(
   })
   return data
 }
+
+export interface IntegrationPostActionTypes {
+  ['issue:assign']: any
+  ['issue:update']: any
+}
+
+export async function postAction<A extends keyof IntegrationPostActionTypes>(
+  integration: Pick<SerializedTeamIntegration, 'id'>,
+  action: A,
+  args?: Record<string, any>,
+  body?: any
+): Promise<IntegrationPostActionTypes[A]> {
+  const { data } = await callApi(`/api/integrations/${integration.id}/action`, {
+    search: { action, ...args },
+    json: body,
+    method: 'post',
+  })
+  return data
+}

From 0f26a9805dedb0bb104f7db6946d1411c5c6de5d Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 25 Aug 2021 16:18:19 +0900
Subject: [PATCH 041/106] add integrationId to data

---
 .../Blocks/forms/GithubIssueForm.tsx          | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
index 754639f1dc..988fca0d7c 100644
--- a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
+++ b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
@@ -234,12 +234,19 @@ const GithubIssueSelector = ({
     setIssues([])
     setSelectedIssues(new Set())
     setPage(1)
+    const integrationId = integrationRef.current.id
     if (currentRepo != null) {
       setIsLoading(true)
       getAction(integrationRef.current, 'repo:issues', {
         owner: currentRepo.owner.login,
         repo: currentRepo.name,
       })
+        .then((issues) =>
+          issues.map((issue) => {
+            issue.integrationId = integrationId
+            return issue
+          })
+        )
         .then(setIssues)
         .finally(() => setIsLoading(false))
         .catch(errorHandleRef.current)
@@ -251,10 +258,16 @@ const GithubIssueSelector = ({
     if (currentRepo != null) {
       try {
         setIsLoading(true)
-        const issues = await getAction(integrationRef.current, 'repo:issues', {
-          owner: currentRepo.owner.login,
-          repo: currentRepo.name,
-          page: page + 1,
+        const integrationId = integrationRef.current.id
+        const issues = (
+          await getAction(integrationRef.current, 'repo:issues', {
+            owner: currentRepo.owner.login,
+            repo: currentRepo.name,
+            page: page + 1,
+          })
+        ).map((issue) => {
+          issue.integrationId = integrationId
+          return issue
         })
         setPage(page + 1)
         setIssues((prev) => prev.concat(issues))

From 45be00ac3d72cc3cb6f50a0f5d3db0e61f8f9464 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 25 Aug 2021 16:21:28 +0900
Subject: [PATCH 042/106] github status changer

---
 .../Blocks/views/Table/GithubStatusCell.tsx   | 86 +++++++++++++++++--
 1 file changed, 77 insertions(+), 9 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx b/src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx
index ed10d2fcf8..bb192c6ca1 100644
--- a/src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx
@@ -1,25 +1,55 @@
-import { mdiAlertCircleCheckOutline, mdiAlertCircleOutline } from '@mdi/js'
-import React from 'react'
 import {
+  mdiAlertCircleCheckOutline,
+  mdiAlertCircleOutline,
+  mdiCheck,
+} from '@mdi/js'
+import React, { useCallback } from 'react'
+import { GithubCellProps } from '.'
+import Icon, {
   SuccessIcon,
   WarningIcon,
 } from '../../../../../design/components/atoms/Icon'
+import { useModal } from '../../../../../design/lib/stores/modal'
 import styled from '../../../../../design/lib/styled'
+import { postAction } from '../../../../api/integrations'
 import { capitalize } from '../../../../lib/utils/string'
 
-interface GithubStatusCellProps {
-  state: 'open' | 'closed'
-}
+const GithubStatusCell = ({ data, onUpdate }: GithubCellProps) => {
+  const { openContextModal, closeAllModals } = useModal()
+
+  const updateState = useCallback(
+    async (state: 'open' | 'closed') => {
+      const [owner, repo] = data.repository.full_name.split('/')
+      const issue = await postAction(
+        { id: data.integrationId },
+        'issue:update',
+        { owner, repo, issue_number: data.number },
+        { state }
+      )
+      await onUpdate({ ...data, ...issue })
+      closeAllModals()
+    },
+    [data, onUpdate, closeAllModals]
+  )
+
+  const openStateSelect: React.MouseEventHandler = useCallback(
+    (ev) => {
+      openContextModal(
+        ev,
+        <GithubStateSelect data={data} onUpdate={updateState} />
+      )
+    },
+    [openContextModal, data, updateState]
+  )
 
-const GithubStatusCell = ({ state }: GithubStatusCellProps) => {
   return (
-    <StyledStatus>
-      {state === 'open' ? (
+    <StyledStatus onClick={openStateSelect}>
+      {data.state === 'open' ? (
         <SuccessIcon path={mdiAlertCircleOutline} />
       ) : (
         <WarningIcon path={mdiAlertCircleCheckOutline} />
       )}
-      <span>{capitalize(state)}</span>
+      <span>{capitalize(data.state)}</span>
     </StyledStatus>
   )
 }
@@ -27,6 +57,7 @@ const GithubStatusCell = ({ state }: GithubStatusCellProps) => {
 const StyledStatus = styled.div`
   display: flex;
   align-items: center;
+  cursor: pointer;
 
   & > svg:first-child {
     margin-right: ${({ theme }) => theme.sizes.spaces.xsm}px;
@@ -38,4 +69,41 @@ const StyledStatus = styled.div`
   }
 `
 
+interface StateSelectProps {
+  data: GithubCellProps['data']
+  onUpdate: (state: 'closed' | 'open') => Promise<void>
+}
+
+const GithubStateSelect = ({ data, onUpdate }: StateSelectProps) => {
+  return (
+    <StateSelectContainer>
+      <div onClick={() => onUpdate('open')}>
+        <SuccessIcon path={mdiAlertCircleOutline} />
+        <span>Open</span>
+        {data.state === 'open' && <Icon path={mdiCheck} />}
+      </div>
+      <div onClick={() => onUpdate('closed')}>
+        <WarningIcon path={mdiAlertCircleCheckOutline} />
+        <span>Closed</span>
+        {data.state === 'closed' && <Icon path={mdiCheck} />}
+      </div>
+    </StateSelectContainer>
+  )
+}
+
+const StateSelectContainer = styled.div`
+  & > div {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    padding: ${({ theme }) => theme.sizes.spaces.sm}px 0;
+    & svg {
+      margin-right: ${({ theme }) => theme.sizes.spaces.df}px;
+    }
+    & > span {
+      flex-grow: 1;
+    }
+  }
+`
+
 export default GithubStatusCell

From 02e23a047a20fc150e789914f9f86c8482d9b262 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 25 Aug 2021 16:22:04 +0900
Subject: [PATCH 043/106] move styling into list component

---
 .../Blocks/views/Table/BoostUserCell.tsx          |  7 -------
 .../components/molecules/FilterableSelectList.tsx | 15 ++++++++++++---
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx b/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
index 3b7eedd9fc..8cee86840d 100644
--- a/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
@@ -76,14 +76,7 @@ const UserSelectContainer = styled.div`
   & .user__select__item {
     display: flex;
     cursor: pointer;
-    padding: ${({ theme }) => theme.sizes.spaces.sm}px 0;
-    border-bottom: 1px solid ${({ theme }) => theme.colors.border.second};
     align-items: center;
-
-    &:first-child {
-      border-top: 1px solid ${({ theme }) => theme.colors.border.second};
-    }
-
     & .user__icon {
       margin-right: ${({ theme }) => theme.sizes.spaces.xsm}px;
     }
diff --git a/src/design/components/molecules/FilterableSelectList.tsx b/src/design/components/molecules/FilterableSelectList.tsx
index 9500e19574..d02fb47da3 100644
--- a/src/design/components/molecules/FilterableSelectList.tsx
+++ b/src/design/components/molecules/FilterableSelectList.tsx
@@ -32,8 +32,8 @@ const FilterableSelectList: AppComponent<FilterableSelectListProps> = ({
         <ul>
           {items
             .filter(([key]) => key.includes(filter))
-            .map(([, node]) => {
-              return <li>{node}</li>
+            .map(([key, node]) => {
+              return <li key={key}>{node}</li>
             })}
         </ul>
       </VerticalScroller>
@@ -46,8 +46,17 @@ export default FilterableSelectList
 const Container = styled.div`
   & ul {
     margin: 0;
+    padding: 0;
     margin-top: ${({ theme }) => theme.sizes.spaces.df}px;
     list-style: none;
-    padding: 0;
+    & > li {
+      padding: ${({ theme }) => theme.sizes.spaces.sm}px 0;
+      border-bottom: 1px solid ${({ theme }) => theme.colors.border.second};
+      align-items: center;
+
+      &:first-child {
+        border-top: 1px solid ${({ theme }) => theme.colors.border.second};
+      }
+    }
   }
 `

From 94bd6d130fa5acf4d6dfe176a29670aa172a3685 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 25 Aug 2021 16:22:13 +0900
Subject: [PATCH 044/106] Assignee Cell

---
 .../views/Table/GithubAssigneesCell.tsx       | 116 ++++++++++++++++--
 1 file changed, 108 insertions(+), 8 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx b/src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx
index 8111384d75..b2dbc6bd20 100644
--- a/src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx
@@ -1,5 +1,11 @@
-import React from 'react'
 import { StyledUserIcon } from '../../../UserIcon'
+import React, { useCallback, useEffect, useState } from 'react'
+import { GithubCellProps } from '.'
+import { useModal } from '../../../../../design/lib/stores/modal'
+import { getAction, postAction } from '../../../../api/integrations'
+import styled from '../../../../../design/lib/styled'
+import FilterableSelectList from '../../../../../design/components/molecules/FilterableSelectList'
+import Spinner from '../../../../../design/components/atoms/Spinner'
 
 interface Assignee {
   id: number
@@ -7,20 +13,114 @@ interface Assignee {
   login: string
 }
 
-interface GitHubAssigneesCellProps {
-  assignees: Assignee[]
-}
+const GitHubAssigneesCell = ({ data, onUpdate }: GithubCellProps) => {
+  const { openContextModal, closeAllModals } = useModal()
+  const addAssignees = useCallback(
+    async (assignees: string[]) => {
+      const [owner, repo] = data.repository.full_name.split('/')
+      const issue = await postAction(
+        { id: data.integrationId },
+        'issue:assign',
+        { owner, repo, issue_number: data.number },
+        { assignees }
+      )
+      await onUpdate({ ...data, ...issue })
+      closeAllModals()
+    },
+    [data]
+  )
+
+  const openAssigneeSelect: React.MouseEventHandler = useCallback(
+    (ev) => {
+      openContextModal(
+        ev,
+        <AssigneeSelect data={data} onSelect={addAssignees} />
+      )
+    },
+    [openContextModal, data]
+  )
 
-const GitHubAssigneesCell = ({ assignees }: GitHubAssigneesCellProps) => {
   return (
-    <div>
-      {assignees.map((user) => (
+    <Container onClick={openAssigneeSelect}>
+      {data.assignees?.map((user: Assignee) => (
         <StyledUserIcon className='subtle'>
           <img src={user.avatar_url} alt={user.login[0]} />
         </StyledUserIcon>
       ))}
-    </div>
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  min-height: 40px;
+`
+
+interface AssigneeSelectProps {
+  data: GithubCellProps['data']
+  onSelect: (names: string[]) => Promise<void>
+}
+
+const AssigneeSelect = ({ data, onSelect }: AssigneeSelectProps) => {
+  const [users, setUsers] = useState<Assignee[] | null>(null)
+
+  useEffect(() => {
+    let cancel = false
+    const cb = async () => {
+      if (
+        data.integrationId != null &&
+        data.repository != null &&
+        data.repository.full_name != null
+      ) {
+        const [owner, repo] = data.repository.full_name.split('/')
+        const users = await getAction(
+          { id: data.integrationId },
+          'repo:collaborators',
+          { owner, repo }
+        )
+        if (!cancel) {
+          setUsers(users)
+        }
+      }
+    }
+    cb()
+    return () => {
+      cancel = true
+    }
+  }, [data])
+
+  if (users == null) {
+    return <Spinner />
+  }
+
+  return (
+    <GithubUserSelectContainer>
+      <h3>Person</h3>
+      <FilterableSelectList
+        items={users.map((user) => [
+          user.login,
+          <div
+            className='user__select__item'
+            onClick={() => onSelect([user.login])}
+          >
+            <StyledUserIcon className='subtle'>
+              <img src={user.avatar_url} alt={user.login[0]} />
+            </StyledUserIcon>
+            {user.login}
+          </div>,
+        ])}
+      />
+    </GithubUserSelectContainer>
   )
 }
 
+const GithubUserSelectContainer = styled.div`
+  & .user__select__item {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    & .user__icon {
+      margin-right: ${({ theme }) => theme.sizes.spaces.df}px;
+    }
+  }
+`
 export default GitHubAssigneesCell

From 6d3f89ea25f58f0c5e0efa670a5548f701478380 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 25 Aug 2021 16:22:19 +0900
Subject: [PATCH 045/106] Label Cell

---
 .../Blocks/views/Table/GithubLabelsCell.tsx   | 133 ++++++++++++++++--
 1 file changed, 118 insertions(+), 15 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx b/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
index cef961fb1a..30ef65e157 100644
--- a/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
@@ -1,33 +1,136 @@
-import React from 'react'
 import styled from '../../../../../design/lib/styled'
+import React, { useCallback, useEffect, useState } from 'react'
+import { GithubCellProps } from '.'
+import { useModal } from '../../../../../design/lib/stores/modal'
+import { getAction, postAction } from '../../../../api/integrations'
+import FilterableSelectList from '../../../../../design/components/molecules/FilterableSelectList'
+import Spinner from '../../../../../design/components/atoms/Spinner'
 
 interface Label {
   name: string
   color: string
+  description: string
 }
 
-interface GithubLabelsCellProps {
-  labels: Label[]
-}
+const GithubLabelsCell = ({ data, onUpdate }: GithubCellProps) => {
+  const { openContextModal, closeAllModals } = useModal()
+  const addLabel = useCallback(
+    async (toAdd: Label[]) => {
+      const labels = data.labels.concat(toAdd).map((label: Label) => label.name)
+      const [owner, repo] = data.repository.full_name.split('/')
+      const issue = await postAction(
+        { id: data.integrationId },
+        'issue:update',
+        { owner, repo, issue_number: data.number },
+        { labels }
+      )
+      await onUpdate(issue)
+      closeAllModals()
+    },
+    [data]
+  )
+
+  const openSetLabelSelect: React.MouseEventHandler = useCallback(
+    (ev) => {
+      openContextModal(
+        ev,
+        <GithubLabelsSelect data={data} onUpdate={addLabel} />
+      )
+    },
+    [data, addLabel]
+  )
 
-const GithubLabelsCell = ({ labels }: GithubLabelsCellProps) => {
   return (
-    <StyledGithubLabels>
-      {labels.map((label) => (
-        <span style={{ backgroundColor: `#${label.color}` }}>{label.name}</span>
-      ))}
+    <StyledGithubLabels onClick={openSetLabelSelect}>
+      <ul>
+        {data.labels.map((label: Label) => (
+          <li style={{ backgroundColor: `#${label.color}` }}>{label.name}</li>
+        ))}
+      </ul>
     </StyledGithubLabels>
   )
 }
 
 const StyledGithubLabels = styled.div`
-  display: flex;
-  span {
-    margin-right: ${({ theme }) => theme.sizes.spaces.xsm}px;
-    padding: ${({ theme }) => theme.sizes.spaces.xsm}px;
-    border-radius: 5px;
-    font-size: ${({ theme }) => theme.sizes.fonts.sm}px;
+  cursor: pointer;
+  min-height: 40px;
+  & > ul {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    list-style: none;
+    & > li {
+      margin-right: ${({ theme }) => theme.sizes.spaces.xsm}px;
+      padding: ${({ theme }) => theme.sizes.spaces.xsm}px;
+      border-radius: 5px;
+      font-size: ${({ theme }) => theme.sizes.fonts.sm}px;
+    }
   }
 `
 
+interface LabelSelectProps {
+  data: GithubCellProps['data']
+  onUpdate: (labels: Label[]) => Promise<void>
+}
+
+const GithubLabelsSelect = ({ data, onUpdate }: LabelSelectProps) => {
+  const [labels, setLabels] = useState<Label[] | null>(null)
+
+  useEffect(() => {
+    let cancel = false
+    const cb = async () => {
+      if (
+        data.integrationId != null &&
+        data.repository != null &&
+        data.repository.full_name != null
+      ) {
+        const [owner, repo] = data.repository.full_name.split('/')
+        const labels = await getAction(
+          { id: data.integrationId },
+          'repo:labels',
+          { owner, repo }
+        )
+        if (!cancel) {
+          setLabels(labels)
+        }
+      }
+    }
+    cb()
+    return () => {
+      cancel = true
+    }
+  }, [data])
+
+  if (labels == null) {
+    return <Spinner />
+  }
+
+  return (
+    <LabelSelectContainer>
+      <h3>Person</h3>
+      <FilterableSelectList
+        items={labels.map((label) => [
+          label.name,
+          <div
+            className='label__select__item'
+            onClick={() => onUpdate([label])}
+          >
+            <h4>{label.name}</h4>
+            <div>{label.description || 'No description'}</div>
+          </div>,
+        ])}
+      />
+    </LabelSelectContainer>
+  )
+}
+
+const LabelSelectContainer = styled.div`
+  & h4 {
+    margin: ${({ theme }) => theme.sizes.spaces.xsm}px 0;
+  }
+
+  & .label__select__item {
+    cursor: pointer;
+  }
+`
 export default GithubLabelsCell

From 5d462182435148181a25e5a7d1f6e43fd014ae8c Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 25 Aug 2021 16:22:28 +0900
Subject: [PATCH 046/106] Use new cell components

---
 .../components/Blocks/views/Table/index.tsx   | 70 +++++++++++++++----
 1 file changed, 56 insertions(+), 14 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
index 5c1117de8c..0ccc6de464 100644
--- a/src/cloud/components/Blocks/views/Table/index.tsx
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -21,12 +21,20 @@ import HyperlinkCell from './HyperlinkCell'
 import TableSettings from './TableSettings'
 import ColumnSettings from './ColumnSettings'
 import BoostUserCell from './BoostUserCell'
-import { TableBlock } from '../../../../api/blocks'
+import { Block, TableBlock } from '../../../../api/blocks'
 import { useModal } from '../../../../../design/lib/stores/modal'
 import Icon from '../../../../../design/components/atoms/Icon'
 import Button from '../../../../../design/components/atoms/Button'
 import { isNumberString, isUrlOrPath } from '../../../../lib/utils/string'
 import styled from '../../../../../design/lib/styled'
+import { StyledUserIcon } from '../../../UserIcon'
+
+type Issue = TableBlock['children'][number]['data']
+
+export interface GithubCellProps {
+  data: Issue
+  onUpdate: (data: Issue) => Promise<void>
+}
 
 export interface CellProps {
   value: string
@@ -111,6 +119,13 @@ const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
     []
   )
 
+  const updateIssueBlock = useCallback(
+    async (block: Block) => {
+      await actions.update(block)
+    },
+    [actions]
+  )
+
   const importIssues = useCallback(() => {
     openModal(
       <GithubIssueForm
@@ -166,6 +181,7 @@ const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
                         row={child}
                         data={table.row_data.get(child.id) || {}}
                         updateCell={updateCell}
+                        updateBlock={updateIssueBlock}
                       />
                     </td>
                   ))}
@@ -193,9 +209,16 @@ interface TableCellProps {
     column: Column,
     value: string
   ) => Promise<void> | void
+  updateBlock: (block: Block) => Promise<void>
 }
 
-const TableCell = ({ column, row, data, updateCell }: TableCellProps) => {
+const TableCell = ({
+  column,
+  row,
+  data,
+  updateCell,
+  updateBlock,
+}: TableCellProps) => {
   const update = useCallback(
     (value: string) => {
       updateCell(row.id, column, value)
@@ -205,7 +228,13 @@ const TableCell = ({ column, row, data, updateCell }: TableCellProps) => {
 
   switch (column.data_type) {
     case 'prop':
-      return <GithubCell prop={column.default || ''} data={row.data} />
+      return (
+        <GithubCell
+          prop={column.default || ''}
+          data={row.data}
+          onUpdate={(data) => updateBlock({ ...row, data })}
+        />
+      )
     case 'number':
       return (
         <TextCell
@@ -234,27 +263,40 @@ const TableCell = ({ column, row, data, updateCell }: TableCellProps) => {
   }
 }
 
-interface GithubCell {
-  prop: string
-  data: any
-}
-
-const GithubCell = ({ prop, data }: GithubCell) => {
+const GithubCell = ({
+  prop,
+  data,
+  onUpdate,
+}: GithubCellProps & { prop: string }) => {
   switch (prop) {
     case 'assignees':
-      return <GitHubAssigneesCell assignees={data.assignees || []} />
+      return <GitHubAssigneesCell data={data} onUpdate={onUpdate} />
     case 'owner':
       return data.repository != null ? (
-        <GitHubAssigneesCell assignees={[data.repository.owner]} />
+        <div>
+          <StyledUserIcon className='subtle'>
+            <img
+              src={data.repository.owner.avatar_url}
+              alt={data.repository.owner.login[0]}
+            />
+          </StyledUserIcon>
+        </div>
       ) : null
     case 'creator':
       return data.milestone != null ? (
-        <GitHubAssigneesCell assignees={[data.milestone.creator]} />
+        <div>
+          <StyledUserIcon className='subtle'>
+            <img
+              src={data.milestone.creator.avatar_url}
+              alt={data.milestone.creator.login[0]}
+            />
+          </StyledUserIcon>
+        </div>
       ) : null
     case 'state':
-      return <GithubStatusCell state={data.state} />
+      return <GithubStatusCell data={data} onUpdate={onUpdate} />
     case 'labels':
-      return <GithubLabelsCell labels={data.labels || []} />
+      return <GithubLabelsCell data={data} onUpdate={onUpdate} />
     case 'pull_request':
       const url = data?.pull_request?.html_url || ''
       return <HyperlinkCell href={url} label={getPRNumFromUrl(url)} />

From f86c413685690d795b78a7cf68f27ce0e951980b Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 25 Aug 2021 17:50:50 +0900
Subject: [PATCH 047/106] api call error handling

---
 .../views/Table/GithubAssigneesCell.tsx       | 63 ++++++++++-------
 .../Blocks/views/Table/GithubLabelsCell.tsx   | 67 ++++++++++++-------
 .../Blocks/views/Table/GithubStatusCell.tsx   | 26 ++++---
 3 files changed, 99 insertions(+), 57 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx b/src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx
index b2dbc6bd20..4b9fd0483f 100644
--- a/src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx
@@ -1,11 +1,12 @@
 import { StyledUserIcon } from '../../../UserIcon'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { GithubCellProps } from '.'
 import { useModal } from '../../../../../design/lib/stores/modal'
 import { getAction, postAction } from '../../../../api/integrations'
 import styled from '../../../../../design/lib/styled'
 import FilterableSelectList from '../../../../../design/components/molecules/FilterableSelectList'
 import Spinner from '../../../../../design/components/atoms/Spinner'
+import { useToast } from '../../../../../design/lib/stores/toast'
 
 interface Assignee {
   id: number
@@ -15,17 +16,23 @@ interface Assignee {
 
 const GitHubAssigneesCell = ({ data, onUpdate }: GithubCellProps) => {
   const { openContextModal, closeAllModals } = useModal()
+  const { pushApiErrorMessage } = useToast()
+
   const addAssignees = useCallback(
     async (assignees: string[]) => {
-      const [owner, repo] = data.repository.full_name.split('/')
-      const issue = await postAction(
-        { id: data.integrationId },
-        'issue:assign',
-        { owner, repo, issue_number: data.number },
-        { assignees }
-      )
-      await onUpdate({ ...data, ...issue })
-      closeAllModals()
+      try {
+        const [owner, repo] = data.repository.full_name.split('/')
+        const issue = await postAction(
+          { id: data.integrationId },
+          'issue:assign',
+          { owner, repo, issue_number: data.number },
+          { assignees }
+        )
+        await onUpdate({ ...data, ...issue })
+        closeAllModals()
+      } catch (error) {
+        pushApiErrorMessage(error)
+      }
     },
     [data]
   )
@@ -62,24 +69,34 @@ interface AssigneeSelectProps {
 
 const AssigneeSelect = ({ data, onSelect }: AssigneeSelectProps) => {
   const [users, setUsers] = useState<Assignee[] | null>(null)
+  const { pushApiErrorMessage } = useToast()
+
+  const pushErrorRef = useRef(pushApiErrorMessage)
+  useEffect(() => {
+    pushErrorRef.current = pushApiErrorMessage
+  }, [pushApiErrorMessage])
 
   useEffect(() => {
     let cancel = false
     const cb = async () => {
-      if (
-        data.integrationId != null &&
-        data.repository != null &&
-        data.repository.full_name != null
-      ) {
-        const [owner, repo] = data.repository.full_name.split('/')
-        const users = await getAction(
-          { id: data.integrationId },
-          'repo:collaborators',
-          { owner, repo }
-        )
-        if (!cancel) {
-          setUsers(users)
+      try {
+        if (
+          data.integrationId != null &&
+          data.repository != null &&
+          data.repository.full_name != null
+        ) {
+          const [owner, repo] = data.repository.full_name.split('/')
+          const users = await getAction(
+            { id: data.integrationId },
+            'repo:collaborators',
+            { owner, repo }
+          )
+          if (!cancel) {
+            setUsers(users)
+          }
         }
+      } catch (error) {
+        pushErrorRef.current(error)
       }
     }
     cb()
diff --git a/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx b/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
index 30ef65e157..e839973a70 100644
--- a/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
@@ -1,10 +1,11 @@
 import styled from '../../../../../design/lib/styled'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { GithubCellProps } from '.'
 import { useModal } from '../../../../../design/lib/stores/modal'
 import { getAction, postAction } from '../../../../api/integrations'
 import FilterableSelectList from '../../../../../design/components/molecules/FilterableSelectList'
 import Spinner from '../../../../../design/components/atoms/Spinner'
+import { useToast } from '../../../../../design/lib/stores/toast'
 
 interface Label {
   name: string
@@ -14,18 +15,26 @@ interface Label {
 
 const GithubLabelsCell = ({ data, onUpdate }: GithubCellProps) => {
   const { openContextModal, closeAllModals } = useModal()
+  const { pushApiErrorMessage } = useToast()
+
   const addLabel = useCallback(
     async (toAdd: Label[]) => {
-      const labels = data.labels.concat(toAdd).map((label: Label) => label.name)
-      const [owner, repo] = data.repository.full_name.split('/')
-      const issue = await postAction(
-        { id: data.integrationId },
-        'issue:update',
-        { owner, repo, issue_number: data.number },
-        { labels }
-      )
-      await onUpdate(issue)
-      closeAllModals()
+      try {
+        const labels = data.labels
+          .concat(toAdd)
+          .map((label: Label) => label.name)
+        const [owner, repo] = data.repository.full_name.split('/')
+        const issue = await postAction(
+          { id: data.integrationId },
+          'issue:update',
+          { owner, repo, issue_number: data.number },
+          { labels }
+        )
+        await onUpdate(issue)
+        closeAllModals()
+      } catch (error) {
+        pushApiErrorMessage(error)
+      }
     },
     [data]
   )
@@ -75,24 +84,34 @@ interface LabelSelectProps {
 
 const GithubLabelsSelect = ({ data, onUpdate }: LabelSelectProps) => {
   const [labels, setLabels] = useState<Label[] | null>(null)
+  const { pushApiErrorMessage } = useToast()
+
+  const pushErrorRef = useRef(pushApiErrorMessage)
+  useEffect(() => {
+    pushErrorRef.current = pushApiErrorMessage
+  }, [pushApiErrorMessage])
 
   useEffect(() => {
     let cancel = false
     const cb = async () => {
-      if (
-        data.integrationId != null &&
-        data.repository != null &&
-        data.repository.full_name != null
-      ) {
-        const [owner, repo] = data.repository.full_name.split('/')
-        const labels = await getAction(
-          { id: data.integrationId },
-          'repo:labels',
-          { owner, repo }
-        )
-        if (!cancel) {
-          setLabels(labels)
+      try {
+        if (
+          data.integrationId != null &&
+          data.repository != null &&
+          data.repository.full_name != null
+        ) {
+          const [owner, repo] = data.repository.full_name.split('/')
+          const labels = await getAction(
+            { id: data.integrationId },
+            'repo:labels',
+            { owner, repo }
+          )
+          if (!cancel) {
+            setLabels(labels)
+          }
         }
+      } catch (error) {
+        pushErrorRef.current(error)
       }
     }
     cb()
diff --git a/src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx b/src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx
index bb192c6ca1..73c62b8f34 100644
--- a/src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx
@@ -10,26 +10,32 @@ import Icon, {
   WarningIcon,
 } from '../../../../../design/components/atoms/Icon'
 import { useModal } from '../../../../../design/lib/stores/modal'
+import { useToast } from '../../../../../design/lib/stores/toast'
 import styled from '../../../../../design/lib/styled'
 import { postAction } from '../../../../api/integrations'
 import { capitalize } from '../../../../lib/utils/string'
 
 const GithubStatusCell = ({ data, onUpdate }: GithubCellProps) => {
   const { openContextModal, closeAllModals } = useModal()
+  const { pushApiErrorMessage } = useToast()
 
   const updateState = useCallback(
     async (state: 'open' | 'closed') => {
-      const [owner, repo] = data.repository.full_name.split('/')
-      const issue = await postAction(
-        { id: data.integrationId },
-        'issue:update',
-        { owner, repo, issue_number: data.number },
-        { state }
-      )
-      await onUpdate({ ...data, ...issue })
-      closeAllModals()
+      try {
+        const [owner, repo] = data.repository.full_name.split('/')
+        const issue = await postAction(
+          { id: data.integrationId },
+          'issue:update',
+          { owner, repo, issue_number: data.number },
+          { state }
+        )
+        await onUpdate({ ...data, ...issue })
+        closeAllModals()
+      } catch (error) {
+        pushApiErrorMessage(error)
+      }
     },
-    [data, onUpdate, closeAllModals]
+    [data, onUpdate, closeAllModals, pushApiErrorMessage]
   )
 
   const openStateSelect: React.MouseEventHandler = useCallback(

From 38045a0d502f4e30321ccd88b32c551d39ffa2e9 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 25 Aug 2021 17:54:51 +0900
Subject: [PATCH 048/106] fix import path

---
 src/cloud/lib/stores/blocks/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/cloud/lib/stores/blocks/index.ts b/src/cloud/lib/stores/blocks/index.ts
index 8e37f6588c..12d74712c4 100644
--- a/src/cloud/lib/stores/blocks/index.ts
+++ b/src/cloud/lib/stores/blocks/index.ts
@@ -1,5 +1,4 @@
 import { createStoreContext } from '../../utils/context'
-import { useToast } from '../../../../shared/lib/stores/toast'
 import { useRef, useCallback } from 'react'
 import {
   Block,
@@ -8,6 +7,7 @@ import {
   updateBlock,
   createBlock,
 } from '../../../api/blocks'
+import { useToast } from '../../../../design/lib/stores/toast'
 
 type BlocksObserver = (blocks: Block) => void
 

From 3056af8574c07a4d523cfbceb82749bbe7d8dd3f Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 25 Aug 2021 18:02:38 +0900
Subject: [PATCH 049/106] fix CenteredContainer import path

---
 src/cloud/pages/[teamId]/invite.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/cloud/pages/[teamId]/invite.tsx b/src/cloud/pages/[teamId]/invite.tsx
index 48b8755f22..79040a9e16 100644
--- a/src/cloud/pages/[teamId]/invite.tsx
+++ b/src/cloud/pages/[teamId]/invite.tsx
@@ -14,7 +14,7 @@ import {
 import { GetInitialPropsParameters } from '../../interfaces/pages'
 import Button from '../../../design/components/atoms/Button'
 import styled from '../../../design/lib/styled'
-import Container from '../../../cloud/components/layouts/CenteredContainer'
+import Container from '../../../cloud/components/Layouts/CenteredContainer'
 
 const OpenInvitePage = ({ invite }: TeamOpenInvitePageData) => {
   const { globalData } = useGlobalData()

From 56c666542e35b3c620377e22a70f857ffaad3a7a Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 25 Aug 2021 18:31:58 +0900
Subject: [PATCH 050/106] fix import issues

---
 src/cloud/components/Blocks/BlockEditor.tsx          | 12 ++++++------
 src/cloud/components/Blocks/forms/ContainerForm.tsx  |  8 ++++----
 .../components/Blocks/forms/GithubIssueForm.tsx      |  2 +-
 src/cloud/components/Blocks/views/Embed.tsx          |  4 ++--
 src/cloud/components/DocPage/index.tsx               |  5 ++++-
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockEditor.tsx b/src/cloud/components/Blocks/BlockEditor.tsx
index ad3ba36d8c..6857fced3e 100644
--- a/src/cloud/components/Blocks/BlockEditor.tsx
+++ b/src/cloud/components/Blocks/BlockEditor.tsx
@@ -1,18 +1,18 @@
 import React from 'react'
-import Application from '../../Application'
-import { SerializedDocWithBookmark } from '../../../interfaces/db/doc'
+import { ContainerBlock } from '../../api/blocks'
+import { SerializedDocWithBookmark } from '../../interfaces/db/doc'
+import ApplicationPage from '../ApplicationPage'
 import BlockContent from './BlockContent'
-import { Block } from '../../../api/blocks'
 
 interface BlockEditorProps {
-  doc: SerializedDocWithBookmark & { rootBlock: Block<any, any> }
+  doc: SerializedDocWithBookmark & { rootBlock: ContainerBlock }
 }
 
 const BlockEditor = ({ doc }: BlockEditorProps) => {
   return (
-    <Application content={{}}>
+    <ApplicationPage>
       <BlockContent doc={doc} />
-    </Application>
+    </ApplicationPage>
   )
 }
 
diff --git a/src/cloud/components/Blocks/forms/ContainerForm.tsx b/src/cloud/components/Blocks/forms/ContainerForm.tsx
index e3110ace1c..fd3cb18471 100644
--- a/src/cloud/components/Blocks/forms/ContainerForm.tsx
+++ b/src/cloud/components/Blocks/forms/ContainerForm.tsx
@@ -1,10 +1,10 @@
 import React, { useRef, useState, useCallback } from 'react'
-import { useI18n } from '../../../../lib/hooks/useI18n'
 import { useEffectOnce } from 'react-use'
-import Form from '../../../../../shared/components/molecules/Form'
-import { lngKeys } from '../../../../lib/i18n/types'
+import Form from '../../../../design/components/molecules/Form'
+import { ContainerBlock } from '../../../api/blocks'
+import { useI18n } from '../../../lib/hooks/useI18n'
+import { lngKeys } from '../../../lib/i18n/types'
 import { FormProps } from '../BlockContent'
-import { ContainerBlock } from '../../../../api/blocks'
 
 const ContainerForm = ({ onSubmit }: FormProps<ContainerBlock>) => {
   const inputRef = useRef<HTMLInputElement>(null)
diff --git a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
index 988fca0d7c..da1c8098a4 100644
--- a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
+++ b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
@@ -7,11 +7,11 @@ import React, {
   useRef,
   ChangeEventHandler,
 } from 'react'
-import { FormSelect } from '../../../../components/atoms/form'
 import Button from '../../../../design/components/atoms/Button'
 import Icon from '../../../../design/components/atoms/Icon'
 import Spinner from '../../../../design/components/atoms/Spinner'
 import FormInput from '../../../../design/components/molecules/Form/atoms/FormInput'
+import FormSelect from '../../../../design/components/molecules/Form/atoms/FormSelect'
 import FormRow from '../../../../design/components/molecules/Form/templates/FormRow'
 import FormRowItem from '../../../../design/components/molecules/Form/templates/FormRowItem'
 import { useTeamIntegrations } from '../../../../design/lib/stores/integrations'
diff --git a/src/cloud/components/Blocks/views/Embed.tsx b/src/cloud/components/Blocks/views/Embed.tsx
index 02ba8cb91d..ab3d0e3b84 100644
--- a/src/cloud/components/Blocks/views/Embed.tsx
+++ b/src/cloud/components/Blocks/views/Embed.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
+import styled from '../../../../design/lib/styled'
+import { EmbedBlock } from '../../../api/blocks'
 import { ViewProps } from '../BlockContent'
-import { EmbedBlock } from '../../../../api/blocks'
-import styled from '../../../../lib/styled'
 
 const EmbedView = ({ block }: ViewProps<EmbedBlock>) => {
   return (
diff --git a/src/cloud/components/DocPage/index.tsx b/src/cloud/components/DocPage/index.tsx
index 89ef6c3f5d..123d4e76c6 100644
--- a/src/cloud/components/DocPage/index.tsx
+++ b/src/cloud/components/DocPage/index.tsx
@@ -21,6 +21,7 @@ import { useRouter } from '../../lib/router'
 import ColoredBlock from '../../../design/components/atoms/ColoredBlock'
 import Editor from '../Editor'
 import ApplicationPage from '../ApplicationPage'
+import BlockEditor from '../Blocks/BlockEditor'
 
 interface DocPageProps {
   doc: SerializedDocWithBookmark
@@ -170,7 +171,7 @@ const DocPage = ({
     )
   }
 
-  return (
+  return doc.rootBlock == null ? (
     <Editor
       team={team}
       doc={doc}
@@ -180,6 +181,8 @@ const DocPage = ({
       revisionHistory={revisionHistory}
       docIsEditable={docIsEditable}
     />
+  ) : (
+    <BlockEditor doc={doc} />
   )
 }
 

From 04c2a09bb1fe604b73cfc714e2a4ef99b14f875f Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 25 Aug 2021 18:33:19 +0900
Subject: [PATCH 051/106] move Layouts -> layouts

---
 src/cloud/components/{Layouts => layouts}/CenteredContainer.tsx | 0
 src/cloud/pages/[teamId]/invite.tsx                             | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/cloud/components/{Layouts => layouts}/CenteredContainer.tsx (100%)

diff --git a/src/cloud/components/Layouts/CenteredContainer.tsx b/src/cloud/components/layouts/CenteredContainer.tsx
similarity index 100%
rename from src/cloud/components/Layouts/CenteredContainer.tsx
rename to src/cloud/components/layouts/CenteredContainer.tsx
diff --git a/src/cloud/pages/[teamId]/invite.tsx b/src/cloud/pages/[teamId]/invite.tsx
index 79040a9e16..48b8755f22 100644
--- a/src/cloud/pages/[teamId]/invite.tsx
+++ b/src/cloud/pages/[teamId]/invite.tsx
@@ -14,7 +14,7 @@ import {
 import { GetInitialPropsParameters } from '../../interfaces/pages'
 import Button from '../../../design/components/atoms/Button'
 import styled from '../../../design/lib/styled'
-import Container from '../../../cloud/components/Layouts/CenteredContainer'
+import Container from '../../../cloud/components/layouts/CenteredContainer'
 
 const OpenInvitePage = ({ invite }: TeamOpenInvitePageData) => {
   const { globalData } = useGlobalData()

From f855c1c10a2879852c440382b533ed0b24406cdf Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Thu, 26 Aug 2021 08:28:56 +0900
Subject: [PATCH 052/106] disallow prop column data type change

---
 .../Blocks/views/Table/ColumnSettings.tsx     | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
index 4be13c78c6..ed3920b20e 100644
--- a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
@@ -67,16 +67,18 @@ const ColumnSettings = ({
             col.data_type === 'prop' ? 'GITHUB PARAMETER' : 'PROPERTY TYPE',
         }}
       />
-      <MetadataContainerRow
-        row={{
-          type: 'button',
-          props: {
-            label: capitalize(col.data_type),
-            iconPath: mdiAccountCircleOutline,
-            onClick: openTypeSelector,
-          },
-        }}
-      />
+      {col.data_type !== 'prop' && (
+        <MetadataContainerRow
+          row={{
+            type: 'button',
+            props: {
+              label: capitalize(col.data_type),
+              iconPath: mdiAccountCircleOutline,
+              onClick: openTypeSelector,
+            },
+          }}
+        />
+      )}
       <MetadataContainerBreak />
       <MetadataContainerRow
         row={{

From 4270d53f7760a89791289a921ae7c5b01d030e90 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Thu, 26 Aug 2021 08:29:14 +0900
Subject: [PATCH 053/106] fix broken cells

---
 src/cloud/components/Blocks/views/Table/index.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
index 0ccc6de464..b55570c417 100644
--- a/src/cloud/components/Blocks/views/Table/index.tsx
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -283,13 +283,10 @@ const GithubCell = ({
         </div>
       ) : null
     case 'creator':
-      return data.milestone != null ? (
+      return data.user != null ? (
         <div>
           <StyledUserIcon className='subtle'>
-            <img
-              src={data.milestone.creator.avatar_url}
-              alt={data.milestone.creator.login[0]}
-            />
+            <img src={data.user.avatar_url} alt={data.user.login[0]} />
           </StyledUserIcon>
         </div>
       ) : null
@@ -301,7 +298,12 @@ const GithubCell = ({
       const url = data?.pull_request?.html_url || ''
       return <HyperlinkCell href={url} label={getPRNumFromUrl(url)} />
     case 'org':
-      return <HyperlinkCell href={''} />
+      return data.repository != null && data.repository.organization != null ? (
+        <HyperlinkCell
+          href={data.repository.organization.html_url}
+          label={data.repository.organization.login}
+        />
+      ) : null
     case 'repo':
       return (
         <HyperlinkCell

From 3ed1f64b3baf1f2642393ed09c6899ad7bd2ca76 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Thu, 26 Aug 2021 08:48:46 +0900
Subject: [PATCH 054/106] fix missing integration id from label update

---
 src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx b/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
index e839973a70..e849585c09 100644
--- a/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
+++ b/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
@@ -30,7 +30,7 @@ const GithubLabelsCell = ({ data, onUpdate }: GithubCellProps) => {
           { owner, repo, issue_number: data.number },
           { labels }
         )
-        await onUpdate(issue)
+        await onUpdate({ ...data, ...issue })
         closeAllModals()
       } catch (error) {
         pushApiErrorMessage(error)

From 4077257963d835ecf26fe325c7950c8c23d4b45e Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 31 Aug 2021 09:21:03 +0900
Subject: [PATCH 055/106] Move cell components to 'props'

---
 .../BoostUserProp.tsx}                        | 16 +++++-----
 .../CheckboxProp.tsx}                         |  6 ++--
 .../Table/DateCell.tsx => props/DateProp.tsx} |  6 ++--
 .../GithubAssigneesProp.tsx}                  | 22 ++++++++------
 .../GithubLabelsProp.tsx}                     | 20 ++++++++-----
 .../GithubStatusProp.tsx}                     | 20 ++++++++-----
 .../HyperlinkProp.tsx}                        |  0
 .../Table/TextCell.tsx => props/TextProp.tsx} |  6 ++--
 src/cloud/components/Blocks/props/types.ts    | 11 +++++++
 .../components/Blocks/views/Table/index.tsx   | 29 +++++++------------
 10 files changed, 75 insertions(+), 61 deletions(-)
 rename src/cloud/components/Blocks/{views/Table/BoostUserCell.tsx => props/BoostUserProp.tsx} (79%)
 rename src/cloud/components/Blocks/{views/Table/CheckboxCell.tsx => props/CheckboxProp.tsx} (59%)
 rename src/cloud/components/Blocks/{views/Table/DateCell.tsx => props/DateProp.tsx} (85%)
 rename src/cloud/components/Blocks/{views/Table/GithubAssigneesCell.tsx => props/GithubAssigneesProp.tsx} (83%)
 rename src/cloud/components/Blocks/{views/Table/GithubLabelsCell.tsx => props/GithubLabelsProp.tsx} (85%)
 rename src/cloud/components/Blocks/{views/Table/GithubStatusCell.tsx => props/GithubStatusProp.tsx} (83%)
 rename src/cloud/components/Blocks/{views/Table/HyperlinkCell.tsx => props/HyperlinkProp.tsx} (100%)
 rename src/cloud/components/Blocks/{views/Table/TextCell.tsx => props/TextProp.tsx} (90%)
 create mode 100644 src/cloud/components/Blocks/props/types.ts

diff --git a/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx b/src/cloud/components/Blocks/props/BoostUserProp.tsx
similarity index 79%
rename from src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
rename to src/cloud/components/Blocks/props/BoostUserProp.tsx
index 8cee86840d..928e2bef75 100644
--- a/src/cloud/components/Blocks/views/Table/BoostUserCell.tsx
+++ b/src/cloud/components/Blocks/props/BoostUserProp.tsx
@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
-import { CellProps } from '.'
-import FilterableSelectList from '../../../../../design/components/molecules/FilterableSelectList'
-import { useModal } from '../../../../../design/lib/stores/modal'
-import styled from '../../../../../design/lib/styled'
-import { SerializedUser } from '../../../../interfaces/db/user'
-import { usePage } from '../../../../lib/stores/pageStore'
-import UserIcon from '../../../UserIcon'
+import FilterableSelectList from '../../../../design/components/molecules/FilterableSelectList'
+import { useModal } from '../../../../design/lib/stores/modal'
+import styled from '../../../../design/lib/styled'
+import { SerializedUser } from '../../../interfaces/db/user'
+import { usePage } from '../../../lib/stores/pageStore'
+import UserIcon from '../../UserIcon'
+import { BlockPropertyProps } from './types'
 
-interface BoostUserCellProps extends CellProps {}
+interface BoostUserCellProps extends BlockPropertyProps {}
 
 const BoostUserCell = ({ value, onUpdate }: BoostUserCellProps) => {
   const { permissions = [] } = usePage()
diff --git a/src/cloud/components/Blocks/views/Table/CheckboxCell.tsx b/src/cloud/components/Blocks/props/CheckboxProp.tsx
similarity index 59%
rename from src/cloud/components/Blocks/views/Table/CheckboxCell.tsx
rename to src/cloud/components/Blocks/props/CheckboxProp.tsx
index deb13104cd..aebf215c53 100644
--- a/src/cloud/components/Blocks/views/Table/CheckboxCell.tsx
+++ b/src/cloud/components/Blocks/props/CheckboxProp.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import { CellProps } from '.'
-import { parseBoolean } from '../../../../lib/utils/string'
+import { parseBoolean } from '../../../lib/utils/string'
+import { BlockPropertyProps } from './types'
 
-const CheckboxCell = ({ value, onUpdate }: CellProps) => {
+const CheckboxCell = ({ value, onUpdate }: BlockPropertyProps) => {
   return (
     <div>
       <input
diff --git a/src/cloud/components/Blocks/views/Table/DateCell.tsx b/src/cloud/components/Blocks/props/DateProp.tsx
similarity index 85%
rename from src/cloud/components/Blocks/views/Table/DateCell.tsx
rename to src/cloud/components/Blocks/props/DateProp.tsx
index 8e94ab3016..b5579ff7fe 100644
--- a/src/cloud/components/Blocks/views/Table/DateCell.tsx
+++ b/src/cloud/components/Blocks/props/DateProp.tsx
@@ -1,10 +1,10 @@
 import { format, isValid } from 'date-fns'
 import React, { useCallback, useMemo } from 'react'
 import DatePicker, { ReactDatePickerProps } from 'react-datepicker'
-import { CellProps } from '.'
-import styled from '../../../../../design/lib/styled'
+import styled from '../../../../design/lib/styled'
+import { BlockPropertyProps } from './types'
 
-const DateCell = ({ value, onUpdate }: CellProps) => {
+const DateCell = ({ value, onUpdate }: BlockPropertyProps) => {
   const date = useMemo(() => {
     const parsed = new Date(value)
     return isValid(parsed) ? parsed : null
diff --git a/src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx b/src/cloud/components/Blocks/props/GithubAssigneesProp.tsx
similarity index 83%
rename from src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx
rename to src/cloud/components/Blocks/props/GithubAssigneesProp.tsx
index 4b9fd0483f..500abb6e24 100644
--- a/src/cloud/components/Blocks/views/Table/GithubAssigneesCell.tsx
+++ b/src/cloud/components/Blocks/props/GithubAssigneesProp.tsx
@@ -1,12 +1,13 @@
-import { StyledUserIcon } from '../../../UserIcon'
+import { StyledUserIcon } from '../../UserIcon'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { GithubCellProps } from '.'
-import { useModal } from '../../../../../design/lib/stores/modal'
-import { getAction, postAction } from '../../../../api/integrations'
-import styled from '../../../../../design/lib/styled'
-import FilterableSelectList from '../../../../../design/components/molecules/FilterableSelectList'
-import Spinner from '../../../../../design/components/atoms/Spinner'
-import { useToast } from '../../../../../design/lib/stores/toast'
+import { useModal } from '../../../../design/lib/stores/modal'
+import { getAction, postAction } from '../../../api/integrations'
+import styled from '../../../../design/lib/styled'
+import FilterableSelectList from '../../../../design/components/molecules/FilterableSelectList'
+import Spinner from '../../../../design/components/atoms/Spinner'
+import { useToast } from '../../../../design/lib/stores/toast'
+import { BlockDataProps } from './types'
+import { GithubIssueBlock } from '../../../api/blocks'
 
 interface Assignee {
   id: number
@@ -14,7 +15,10 @@ interface Assignee {
   login: string
 }
 
-const GitHubAssigneesCell = ({ data, onUpdate }: GithubCellProps) => {
+const GitHubAssigneesCell = ({
+  data,
+  onUpdate,
+}: BlockDataProps<GithubIssueBlock>) => {
   const { openContextModal, closeAllModals } = useModal()
   const { pushApiErrorMessage } = useToast()
 
diff --git a/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx b/src/cloud/components/Blocks/props/GithubLabelsProp.tsx
similarity index 85%
rename from src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
rename to src/cloud/components/Blocks/props/GithubLabelsProp.tsx
index e849585c09..b287a79302 100644
--- a/src/cloud/components/Blocks/views/Table/GithubLabelsCell.tsx
+++ b/src/cloud/components/Blocks/props/GithubLabelsProp.tsx
@@ -1,11 +1,12 @@
-import styled from '../../../../../design/lib/styled'
+import styled from '../../../../design/lib/styled'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { GithubCellProps } from '.'
-import { useModal } from '../../../../../design/lib/stores/modal'
-import { getAction, postAction } from '../../../../api/integrations'
-import FilterableSelectList from '../../../../../design/components/molecules/FilterableSelectList'
-import Spinner from '../../../../../design/components/atoms/Spinner'
-import { useToast } from '../../../../../design/lib/stores/toast'
+import { useModal } from '../../../../design/lib/stores/modal'
+import { getAction, postAction } from '../../../api/integrations'
+import FilterableSelectList from '../../../../design/components/molecules/FilterableSelectList'
+import Spinner from '../../../../design/components/atoms/Spinner'
+import { useToast } from '../../../../design/lib/stores/toast'
+import { BlockDataProps } from './types'
+import { GithubIssueBlock } from '../../../api/blocks'
 
 interface Label {
   name: string
@@ -13,7 +14,10 @@ interface Label {
   description: string
 }
 
-const GithubLabelsCell = ({ data, onUpdate }: GithubCellProps) => {
+const GithubLabelsCell = ({
+  data,
+  onUpdate,
+}: BlockDataProps<GithubIssueBlock>) => {
   const { openContextModal, closeAllModals } = useModal()
   const { pushApiErrorMessage } = useToast()
 
diff --git a/src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx b/src/cloud/components/Blocks/props/GithubStatusProp.tsx
similarity index 83%
rename from src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx
rename to src/cloud/components/Blocks/props/GithubStatusProp.tsx
index 73c62b8f34..bdcb0bfac5 100644
--- a/src/cloud/components/Blocks/views/Table/GithubStatusCell.tsx
+++ b/src/cloud/components/Blocks/props/GithubStatusProp.tsx
@@ -4,18 +4,22 @@ import {
   mdiCheck,
 } from '@mdi/js'
 import React, { useCallback } from 'react'
-import { GithubCellProps } from '.'
 import Icon, {
   SuccessIcon,
   WarningIcon,
-} from '../../../../../design/components/atoms/Icon'
-import { useModal } from '../../../../../design/lib/stores/modal'
-import { useToast } from '../../../../../design/lib/stores/toast'
-import styled from '../../../../../design/lib/styled'
-import { postAction } from '../../../../api/integrations'
-import { capitalize } from '../../../../lib/utils/string'
+} from '../../../../design/components/atoms/Icon'
+import { useModal } from '../../../../design/lib/stores/modal'
+import { useToast } from '../../../../design/lib/stores/toast'
+import styled from '../../../../design/lib/styled'
+import { GithubIssueBlock } from '../../../api/blocks'
+import { postAction } from '../../../api/integrations'
+import { capitalize } from '../../../lib/utils/string'
+import { BlockDataProps } from './types'
 
-const GithubStatusCell = ({ data, onUpdate }: GithubCellProps) => {
+const GithubStatusCell = ({
+  data,
+  onUpdate,
+}: BlockDataProps<GithubIssueBlock>) => {
   const { openContextModal, closeAllModals } = useModal()
   const { pushApiErrorMessage } = useToast()
 
diff --git a/src/cloud/components/Blocks/views/Table/HyperlinkCell.tsx b/src/cloud/components/Blocks/props/HyperlinkProp.tsx
similarity index 100%
rename from src/cloud/components/Blocks/views/Table/HyperlinkCell.tsx
rename to src/cloud/components/Blocks/props/HyperlinkProp.tsx
diff --git a/src/cloud/components/Blocks/views/Table/TextCell.tsx b/src/cloud/components/Blocks/props/TextProp.tsx
similarity index 90%
rename from src/cloud/components/Blocks/views/Table/TextCell.tsx
rename to src/cloud/components/Blocks/props/TextProp.tsx
index f722db9ca7..dc1c48e269 100644
--- a/src/cloud/components/Blocks/views/Table/TextCell.tsx
+++ b/src/cloud/components/Blocks/props/TextProp.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { CellProps } from '.'
-import styled from '../../../../../design/lib/styled'
+import styled from '../../../../design/lib/styled'
+import { BlockPropertyProps } from './types'
 
-interface TextCellProps extends CellProps {
+interface TextCellProps extends BlockPropertyProps {
   validation?: (value: string) => boolean
 }
 
diff --git a/src/cloud/components/Blocks/props/types.ts b/src/cloud/components/Blocks/props/types.ts
new file mode 100644
index 0000000000..cd6bdf39ce
--- /dev/null
+++ b/src/cloud/components/Blocks/props/types.ts
@@ -0,0 +1,11 @@
+import { Block } from '../../../api/blocks'
+
+export interface BlockPropertyProps {
+  value: string
+  onUpdate: (val: string) => Promise<void> | void
+}
+
+export interface BlockDataProps<T extends Block> {
+  data: T['data']
+  onUpdate: (data: T['data']) => Promise<void>
+}
diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
index b55570c417..5fe7410ed9 100644
--- a/src/cloud/components/Blocks/views/Table/index.tsx
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -11,16 +11,16 @@ import {
   setCellData,
   syncTo,
 } from '../../../../lib/blocks/table'
-import TextCell from './TextCell'
-import CheckboxCell from './CheckboxCell'
-import DateCell from './DateCell'
-import GitHubAssigneesCell from './GithubAssigneesCell'
-import GithubStatusCell from './GithubStatusCell'
-import GithubLabelsCell from './GithubLabelsCell'
-import HyperlinkCell from './HyperlinkCell'
+import TextCell from '../../props/TextProp'
+import CheckboxCell from '../../props/CheckboxProp'
+import DateCell from '../../props/DateProp'
+import GitHubAssigneesCell from '../../props/GithubAssigneesProp'
+import GithubStatusCell from '../../props/GithubStatusProp'
+import GithubLabelsCell from '../../props/GithubLabelsProp'
+import HyperlinkCell from '../../props/HyperlinkProp'
 import TableSettings from './TableSettings'
 import ColumnSettings from './ColumnSettings'
-import BoostUserCell from './BoostUserCell'
+import BoostUserCell from '../../props/BoostUserProp'
 import { Block, TableBlock } from '../../../../api/blocks'
 import { useModal } from '../../../../../design/lib/stores/modal'
 import Icon from '../../../../../design/components/atoms/Icon'
@@ -28,18 +28,9 @@ import Button from '../../../../../design/components/atoms/Button'
 import { isNumberString, isUrlOrPath } from '../../../../lib/utils/string'
 import styled from '../../../../../design/lib/styled'
 import { StyledUserIcon } from '../../../UserIcon'
+import { BlockDataProps } from '../../props/types'
 
-type Issue = TableBlock['children'][number]['data']
-
-export interface GithubCellProps {
-  data: Issue
-  onUpdate: (data: Issue) => Promise<void>
-}
-
-export interface CellProps {
-  value: string
-  onUpdate: (val: string) => Promise<void> | void
-}
+type GithubCellProps = BlockDataProps<TableBlock['children'][number]>
 
 const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
   const { openModal, openContextModal, closeAllModals } = useModal()

From 3cc3be1a4942d200ead6ec2be6fe95a9ad72ae49 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 31 Aug 2021 09:54:58 +0900
Subject: [PATCH 056/106] empty string handling for prop components

---
 src/cloud/components/Blocks/props/GithubAssigneesProp.tsx | 2 +-
 src/cloud/components/Blocks/props/GithubLabelsProp.tsx    | 2 +-
 src/cloud/components/Blocks/props/GithubStatusProp.tsx    | 2 +-
 src/cloud/lib/utils/string.ts                             | 4 ++++
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/cloud/components/Blocks/props/GithubAssigneesProp.tsx b/src/cloud/components/Blocks/props/GithubAssigneesProp.tsx
index 500abb6e24..6e26705f1e 100644
--- a/src/cloud/components/Blocks/props/GithubAssigneesProp.tsx
+++ b/src/cloud/components/Blocks/props/GithubAssigneesProp.tsx
@@ -67,7 +67,7 @@ const Container = styled.div`
 `
 
 interface AssigneeSelectProps {
-  data: GithubCellProps['data']
+  data: GithubIssueBlock['data']
   onSelect: (names: string[]) => Promise<void>
 }
 
diff --git a/src/cloud/components/Blocks/props/GithubLabelsProp.tsx b/src/cloud/components/Blocks/props/GithubLabelsProp.tsx
index b287a79302..0202140da5 100644
--- a/src/cloud/components/Blocks/props/GithubLabelsProp.tsx
+++ b/src/cloud/components/Blocks/props/GithubLabelsProp.tsx
@@ -82,7 +82,7 @@ const StyledGithubLabels = styled.div`
 `
 
 interface LabelSelectProps {
-  data: GithubCellProps['data']
+  data: GithubIssueBlock['data']
   onUpdate: (labels: Label[]) => Promise<void>
 }
 
diff --git a/src/cloud/components/Blocks/props/GithubStatusProp.tsx b/src/cloud/components/Blocks/props/GithubStatusProp.tsx
index bdcb0bfac5..eef1fb276a 100644
--- a/src/cloud/components/Blocks/props/GithubStatusProp.tsx
+++ b/src/cloud/components/Blocks/props/GithubStatusProp.tsx
@@ -80,7 +80,7 @@ const StyledStatus = styled.div`
 `
 
 interface StateSelectProps {
-  data: GithubCellProps['data']
+  data: GithubIssueBlock['data']
   onUpdate: (state: 'closed' | 'open') => Promise<void>
 }
 
diff --git a/src/cloud/lib/utils/string.ts b/src/cloud/lib/utils/string.ts
index 806aa12cfb..60b82f5f63 100644
--- a/src/cloud/lib/utils/string.ts
+++ b/src/cloud/lib/utils/string.ts
@@ -90,6 +90,10 @@ export function isNumberString(str: string) {
 }
 
 export function parseBoolean(str: string, deflt = false) {
+  if (typeof str !== 'string') {
+    return deflt
+  }
+
   const lower = str.toLowerCase()
   if (lower === 'true' || lower === '1') {
     return true

From 381cfb65f44cc830e86cc470e003e28220fb1a37 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Tue, 31 Aug 2021 11:02:16 +0900
Subject: [PATCH 057/106] separate data updater components

---
 .../GithubAssigneesData.tsx}                  |  4 +-
 .../GithubLabelsData.tsx}                     |  4 +-
 .../GithubStatusData.tsx}                     |  4 +-
 src/cloud/components/Blocks/data/types.ts     |  6 +++
 .../components/Blocks/props/BoostUserProp.tsx |  6 +--
 .../components/Blocks/props/CheckboxProp.tsx  |  4 +-
 .../components/Blocks/props/DateProp.tsx      |  4 +-
 .../components/Blocks/props/TextProp.tsx      |  6 +--
 src/cloud/components/Blocks/props/types.ts    |  7 ---
 .../components/Blocks/views/Table/index.tsx   | 44 +++++++++----------
 10 files changed, 44 insertions(+), 45 deletions(-)
 rename src/cloud/components/Blocks/{props/GithubAssigneesProp.tsx => data/GithubAssigneesData.tsx} (98%)
 rename src/cloud/components/Blocks/{props/GithubLabelsProp.tsx => data/GithubLabelsData.tsx} (98%)
 rename src/cloud/components/Blocks/{props/GithubStatusProp.tsx => data/GithubStatusData.tsx} (98%)
 create mode 100644 src/cloud/components/Blocks/data/types.ts

diff --git a/src/cloud/components/Blocks/props/GithubAssigneesProp.tsx b/src/cloud/components/Blocks/data/GithubAssigneesData.tsx
similarity index 98%
rename from src/cloud/components/Blocks/props/GithubAssigneesProp.tsx
rename to src/cloud/components/Blocks/data/GithubAssigneesData.tsx
index 6e26705f1e..3de60ad62e 100644
--- a/src/cloud/components/Blocks/props/GithubAssigneesProp.tsx
+++ b/src/cloud/components/Blocks/data/GithubAssigneesData.tsx
@@ -15,7 +15,7 @@ interface Assignee {
   login: string
 }
 
-const GitHubAssigneesCell = ({
+const GitHubAssigneesData = ({
   data,
   onUpdate,
 }: BlockDataProps<GithubIssueBlock>) => {
@@ -144,4 +144,4 @@ const GithubUserSelectContainer = styled.div`
     }
   }
 `
-export default GitHubAssigneesCell
+export default GitHubAssigneesData
diff --git a/src/cloud/components/Blocks/props/GithubLabelsProp.tsx b/src/cloud/components/Blocks/data/GithubLabelsData.tsx
similarity index 98%
rename from src/cloud/components/Blocks/props/GithubLabelsProp.tsx
rename to src/cloud/components/Blocks/data/GithubLabelsData.tsx
index 0202140da5..06efcab1f8 100644
--- a/src/cloud/components/Blocks/props/GithubLabelsProp.tsx
+++ b/src/cloud/components/Blocks/data/GithubLabelsData.tsx
@@ -14,7 +14,7 @@ interface Label {
   description: string
 }
 
-const GithubLabelsCell = ({
+const GithubLabelsData = ({
   data,
   onUpdate,
 }: BlockDataProps<GithubIssueBlock>) => {
@@ -156,4 +156,4 @@ const LabelSelectContainer = styled.div`
     cursor: pointer;
   }
 `
-export default GithubLabelsCell
+export default GithubLabelsData
diff --git a/src/cloud/components/Blocks/props/GithubStatusProp.tsx b/src/cloud/components/Blocks/data/GithubStatusData.tsx
similarity index 98%
rename from src/cloud/components/Blocks/props/GithubStatusProp.tsx
rename to src/cloud/components/Blocks/data/GithubStatusData.tsx
index eef1fb276a..b39446a979 100644
--- a/src/cloud/components/Blocks/props/GithubStatusProp.tsx
+++ b/src/cloud/components/Blocks/data/GithubStatusData.tsx
@@ -16,7 +16,7 @@ import { postAction } from '../../../api/integrations'
 import { capitalize } from '../../../lib/utils/string'
 import { BlockDataProps } from './types'
 
-const GithubStatusCell = ({
+const GithubStatusData = ({
   data,
   onUpdate,
 }: BlockDataProps<GithubIssueBlock>) => {
@@ -116,4 +116,4 @@ const StateSelectContainer = styled.div`
   }
 `
 
-export default GithubStatusCell
+export default GithubStatusData
diff --git a/src/cloud/components/Blocks/data/types.ts b/src/cloud/components/Blocks/data/types.ts
new file mode 100644
index 0000000000..c5b3954dd6
--- /dev/null
+++ b/src/cloud/components/Blocks/data/types.ts
@@ -0,0 +1,6 @@
+import { Block } from '../../../api/blocks'
+
+export interface BlockDataProps<T extends Block> {
+  data: T['data']
+  onUpdate: (data: T['data']) => Promise<void>
+}
diff --git a/src/cloud/components/Blocks/props/BoostUserProp.tsx b/src/cloud/components/Blocks/props/BoostUserProp.tsx
index 928e2bef75..c2826ff2f0 100644
--- a/src/cloud/components/Blocks/props/BoostUserProp.tsx
+++ b/src/cloud/components/Blocks/props/BoostUserProp.tsx
@@ -7,9 +7,9 @@ import { usePage } from '../../../lib/stores/pageStore'
 import UserIcon from '../../UserIcon'
 import { BlockPropertyProps } from './types'
 
-interface BoostUserCellProps extends BlockPropertyProps {}
+interface BoostUserPropProps extends BlockPropertyProps {}
 
-const BoostUserCell = ({ value, onUpdate }: BoostUserCellProps) => {
+const BoostUserProp = ({ value, onUpdate }: BoostUserPropProps) => {
   const { permissions = [] } = usePage()
   const { openContextModal } = useModal()
 
@@ -83,4 +83,4 @@ const UserSelectContainer = styled.div`
   }
 `
 
-export default BoostUserCell
+export default BoostUserProp
diff --git a/src/cloud/components/Blocks/props/CheckboxProp.tsx b/src/cloud/components/Blocks/props/CheckboxProp.tsx
index aebf215c53..b0af6bb185 100644
--- a/src/cloud/components/Blocks/props/CheckboxProp.tsx
+++ b/src/cloud/components/Blocks/props/CheckboxProp.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { parseBoolean } from '../../../lib/utils/string'
 import { BlockPropertyProps } from './types'
 
-const CheckboxCell = ({ value, onUpdate }: BlockPropertyProps) => {
+const CheckboxProp = ({ value, onUpdate }: BlockPropertyProps) => {
   return (
     <div>
       <input
@@ -14,4 +14,4 @@ const CheckboxCell = ({ value, onUpdate }: BlockPropertyProps) => {
   )
 }
 
-export default CheckboxCell
+export default CheckboxProp
diff --git a/src/cloud/components/Blocks/props/DateProp.tsx b/src/cloud/components/Blocks/props/DateProp.tsx
index b5579ff7fe..d890e2cb50 100644
--- a/src/cloud/components/Blocks/props/DateProp.tsx
+++ b/src/cloud/components/Blocks/props/DateProp.tsx
@@ -4,7 +4,7 @@ import DatePicker, { ReactDatePickerProps } from 'react-datepicker'
 import styled from '../../../../design/lib/styled'
 import { BlockPropertyProps } from './types'
 
-const DateCell = ({ value, onUpdate }: BlockPropertyProps) => {
+const DateProp = ({ value, onUpdate }: BlockPropertyProps) => {
   const date = useMemo(() => {
     const parsed = new Date(value)
     return isValid(parsed) ? parsed : null
@@ -39,7 +39,7 @@ const DateCell = ({ value, onUpdate }: BlockPropertyProps) => {
   )
 }
 
-export default DateCell
+export default DateProp
 
 const Container = styled.div`
   cursor: pointer;
diff --git a/src/cloud/components/Blocks/props/TextProp.tsx b/src/cloud/components/Blocks/props/TextProp.tsx
index dc1c48e269..16a407d766 100644
--- a/src/cloud/components/Blocks/props/TextProp.tsx
+++ b/src/cloud/components/Blocks/props/TextProp.tsx
@@ -2,11 +2,11 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styled from '../../../../design/lib/styled'
 import { BlockPropertyProps } from './types'
 
-interface TextCellProps extends BlockPropertyProps {
+interface TextPropProps extends BlockPropertyProps {
   validation?: (value: string) => boolean
 }
 
-const TextCell = ({ value, onUpdate, validation }: TextCellProps) => {
+const TextProp = ({ value, onUpdate, validation }: TextPropProps) => {
   const [mode, setMode] = useState<'view' | 'edit'>('view')
   const [internal, setInternal] = useState(value)
   const [hasError, setHasError] = useState(false)
@@ -56,7 +56,7 @@ const TextCell = ({ value, onUpdate, validation }: TextCellProps) => {
   )
 }
 
-export default TextCell
+export default TextProp
 
 const StyledTextCell = styled.div`
   min-height: 20px;
diff --git a/src/cloud/components/Blocks/props/types.ts b/src/cloud/components/Blocks/props/types.ts
index cd6bdf39ce..4afb07c5d1 100644
--- a/src/cloud/components/Blocks/props/types.ts
+++ b/src/cloud/components/Blocks/props/types.ts
@@ -1,11 +1,4 @@
-import { Block } from '../../../api/blocks'
-
 export interface BlockPropertyProps {
   value: string
   onUpdate: (val: string) => Promise<void> | void
 }
-
-export interface BlockDataProps<T extends Block> {
-  data: T['data']
-  onUpdate: (data: T['data']) => Promise<void>
-}
diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
index 5fe7410ed9..b485a57f39 100644
--- a/src/cloud/components/Blocks/views/Table/index.tsx
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -11,16 +11,16 @@ import {
   setCellData,
   syncTo,
 } from '../../../../lib/blocks/table'
-import TextCell from '../../props/TextProp'
-import CheckboxCell from '../../props/CheckboxProp'
-import DateCell from '../../props/DateProp'
-import GitHubAssigneesCell from '../../props/GithubAssigneesProp'
-import GithubStatusCell from '../../props/GithubStatusProp'
-import GithubLabelsCell from '../../props/GithubLabelsProp'
-import HyperlinkCell from '../../props/HyperlinkProp'
+import TextProp from '../../props/TextProp'
+import CheckboxProp from '../../props/CheckboxProp'
+import DateProp from '../../props/DateProp'
+import GitHubAssigneesData from '../../data/GithubAssigneesData'
+import GithubStatusData from '../../data/GithubStatusData'
+import GithubLabelsData from '../../data/GithubLabelsData'
+import HyperlinkProp from '../../props/HyperlinkProp'
 import TableSettings from './TableSettings'
 import ColumnSettings from './ColumnSettings'
-import BoostUserCell from '../../props/BoostUserProp'
+import BoostUserProp from '../../props/BoostUserProp'
 import { Block, TableBlock } from '../../../../api/blocks'
 import { useModal } from '../../../../../design/lib/stores/modal'
 import Icon from '../../../../../design/components/atoms/Icon'
@@ -28,7 +28,7 @@ import Button from '../../../../../design/components/atoms/Button'
 import { isNumberString, isUrlOrPath } from '../../../../lib/utils/string'
 import styled from '../../../../../design/lib/styled'
 import { StyledUserIcon } from '../../../UserIcon'
-import { BlockDataProps } from '../../props/types'
+import { BlockDataProps } from '../../data/types'
 
 type GithubCellProps = BlockDataProps<TableBlock['children'][number]>
 
@@ -228,29 +228,29 @@ const TableCell = ({
       )
     case 'number':
       return (
-        <TextCell
+        <TextProp
           value={data[column.id] || ''}
           onUpdate={update}
           validation={isNumberString}
         />
       )
     case 'date':
-      return <DateCell value={data[column.id] || ''} onUpdate={update} />
+      return <DateProp value={data[column.id] || ''} onUpdate={update} />
     case 'url':
       return (
-        <TextCell
+        <TextProp
           value={data[column.id] || ''}
           onUpdate={update}
           validation={isUrlOrPath}
         />
       )
     case 'checkbox':
-      return <CheckboxCell value={data[column.id] || ''} onUpdate={update} />
+      return <CheckboxProp value={data[column.id] || ''} onUpdate={update} />
     case 'user':
-      return <BoostUserCell value={data[column.id] || ''} onUpdate={update} />
+      return <BoostUserProp value={data[column.id] || ''} onUpdate={update} />
     case 'text':
     default:
-      return <TextCell value={data[column.id] || ''} onUpdate={update} />
+      return <TextProp value={data[column.id] || ''} onUpdate={update} />
   }
 }
 
@@ -261,7 +261,7 @@ const GithubCell = ({
 }: GithubCellProps & { prop: string }) => {
   switch (prop) {
     case 'assignees':
-      return <GitHubAssigneesCell data={data} onUpdate={onUpdate} />
+      return <GitHubAssigneesData data={data} onUpdate={onUpdate} />
     case 'owner':
       return data.repository != null ? (
         <div>
@@ -282,22 +282,22 @@ const GithubCell = ({
         </div>
       ) : null
     case 'state':
-      return <GithubStatusCell data={data} onUpdate={onUpdate} />
+      return <GithubStatusData data={data} onUpdate={onUpdate} />
     case 'labels':
-      return <GithubLabelsCell data={data} onUpdate={onUpdate} />
+      return <GithubLabelsData data={data} onUpdate={onUpdate} />
     case 'pull_request':
       const url = data?.pull_request?.html_url || ''
-      return <HyperlinkCell href={url} label={getPRNumFromUrl(url)} />
+      return <HyperlinkProp href={url} label={getPRNumFromUrl(url)} />
     case 'org':
       return data.repository != null && data.repository.organization != null ? (
-        <HyperlinkCell
+        <HyperlinkProp
           href={data.repository.organization.html_url}
           label={data.repository.organization.login}
         />
       ) : null
     case 'repo':
       return (
-        <HyperlinkCell
+        <HyperlinkProp
           href={data?.repository?.html_url}
           label={data?.repository?.full_name}
         />
@@ -308,7 +308,7 @@ const GithubCell = ({
       return <div>{data.body}</div>
     case 'milestone':
       return (
-        <HyperlinkCell
+        <HyperlinkProp
           href={data?.milestone?.html_url || ''}
           label={data?.milestone?.title}
         />

From bd54d6e73ee2aad484c82f898469efcd0b31c433 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Fri, 3 Sep 2021 17:41:15 +0900
Subject: [PATCH 058/106] block prop module

---
 src/cloud/lib/blocks/props.ts | 36 +++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/cloud/lib/blocks/props.ts

diff --git a/src/cloud/lib/blocks/props.ts b/src/cloud/lib/blocks/props.ts
new file mode 100644
index 0000000000..841cae251c
--- /dev/null
+++ b/src/cloud/lib/blocks/props.ts
@@ -0,0 +1,36 @@
+const PROP_TYPES = [
+  'text',
+  'number',
+  'date',
+  'url',
+  'checkbox',
+  'user',
+] as const
+
+export type PropType = typeof PROP_TYPES[number]
+export type PropKey = `${string}:${PropType}`
+
+export function isPropKey(k: any): k is PropKey {
+  if (typeof k !== 'string') {
+    return false
+  }
+
+  const [_key, type, ...rest] = k.split(':')
+  if (rest.length !== 0) {
+    return false
+  }
+
+  return PROP_TYPES.includes(type as any)
+}
+
+export function makePropKey(name: string, type: PropType): PropKey {
+  return `${name}:${type}`
+}
+
+export function getPropName(type: PropKey): string {
+  return type.split(':')[0]
+}
+
+export function getPropType(type: PropKey): PropType {
+  return type.split(':')[1] as PropType
+}

From 0c30a85daa217e8f9b8f32e482556e69d9d1cee2 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Fri, 3 Sep 2021 17:41:23 +0900
Subject: [PATCH 059/106] block prop api hook

---
 src/cloud/lib/hooks/useBlockProps.ts | 72 ++++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/cloud/lib/hooks/useBlockProps.ts

diff --git a/src/cloud/lib/hooks/useBlockProps.ts b/src/cloud/lib/hooks/useBlockProps.ts
new file mode 100644
index 0000000000..db24b621bd
--- /dev/null
+++ b/src/cloud/lib/hooks/useBlockProps.ts
@@ -0,0 +1,72 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { Doc as YDoc } from 'yjs'
+import { YMap } from 'yjs/dist/src/internals'
+import { Block } from '../../api/blocks'
+import { isPropKey, PropKey } from '../blocks/props'
+
+interface Actions {
+  set: (key: PropKey, value: string) => void
+  delete: (key: PropKey) => void
+}
+
+export function useBlockProps(
+  block: Block,
+  realtime: YDoc
+): [Record<PropKey, string>, Actions] {
+  const ymap = useRef(realtime.getMap(block.id))
+  const [state, setState] = useState(() => ymapToPropMap(ymap.current))
+
+  useEffect(() => {
+    ymap.current = realtime.getMap(block.id)
+    setState(ymapToPropMap(ymap.current))
+    const observer = () => setState(ymapToPropMap(ymap.current))
+    ymap.current.observe(observer)
+
+    return () => ymap.current.unobserve(observer)
+  }, [block.id, realtime])
+
+  return [state, ymap.current]
+}
+
+export function useAvaliableBlockPropKeys(
+  blocks: Block[],
+  ydoc: YDoc
+): Set<PropKey> {
+  const [keys, setKeys] = useState(() =>
+    getAvailableKeys(blocks.map((block) => ydoc.getMap(block.id)))
+  )
+  const blockIds = useMemo(() => {
+    return blocks.map((block) => block.id)
+  }, [blocks])
+
+  useEffect(() => {
+    const maps = blockIds.map((id) => ydoc.getMap(id))
+    setKeys(getAvailableKeys(maps))
+    const cb = () => {
+      setKeys(getAvailableKeys(maps))
+    }
+
+    for (const map of maps) {
+      map.observe(cb)
+    }
+    return () => {
+      for (const map of maps) {
+        map.unobserve(cb)
+      }
+    }
+  }, [blockIds, ydoc])
+
+  return keys
+}
+
+function ymapToPropMap(map: YMap<string>): Record<PropKey, string> {
+  return Object.fromEntries(
+    Array.from(map.entries()).filter(([key]) => isPropKey(key))
+  )
+}
+
+function getAvailableKeys(maps: YMap<string>[]): Set<PropKey> {
+  return new Set(
+    maps.flatMap((map) => Array.from(map.keys()).filter(isPropKey))
+  )
+}

From f844a63574fe3ff7fe7d0009aa1f6645c57a344a Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Fri, 3 Sep 2021 17:41:59 +0900
Subject: [PATCH 060/106] table api update

---
 src/cloud/lib/blocks/table.ts | 338 +++++++++++++++++-----------------
 1 file changed, 172 insertions(+), 166 deletions(-)

diff --git a/src/cloud/lib/blocks/table.ts b/src/cloud/lib/blocks/table.ts
index b481b01249..e9f3c2dc25 100644
--- a/src/cloud/lib/blocks/table.ts
+++ b/src/cloud/lib/blocks/table.ts
@@ -1,207 +1,213 @@
-import { v4 as uuid } from 'uuid'
-import { Array as YArray, Map as YMap } from 'yjs'
-
-export type DataType =
-  | 'text'
-  | 'number'
-  | 'date'
-  | 'url'
-  | 'checkbox'
-  | 'user'
-  | 'prop'
-
-export interface Column {
-  id: string
-  name: string
-  data_type: DataType
-  default?: string
-}
-
-export interface Table {
-  columns: Column[]
-  row_data: Map<string, Record<string, string>>
-}
-
-export function createTable(columns: Omit<Column, 'id'>[]): Table {
-  return {
-    columns: columns.map((col) => ({ ...col, id: uuid() })),
-    row_data: new Map(),
-  }
-}
+import { Array as YArray, Map as YMap, Doc as YDoc } from 'yjs'
+import {
+  getPropName,
+  getPropType,
+  isPropKey,
+  makePropKey,
+  PropKey,
+  PropType,
+} from './props'
+
+type DataPropCol = `prop:${string}:${string}`
+export type Column = PropKey | DataPropCol
+
+export type YTable = YMap<YArray<string> | YMap<string>>
 
-export function addColumn(column: Omit<Column, 'id'>, table: Table): Table {
-  const id = uuid()
-  return { ...table, columns: [...table.columns, { id, ...column }] }
+export function getYTable(id: string, doc: YDoc): YTable {
+  return sanitize(doc.getMap(id))
 }
 
-export function moveColumn(target: number, column: Column, table: Table) {
-  const index = table.columns.findIndex((col) => col.id === column.id)
-  if (index < 0 || target < 0) {
-    return table
-  }
+export function addColumn(column: Column, table: YTable): YTable {
+  table.doc?.transact(() => {
+    const [columns, excluded] = getStructure(table)
 
-  const mutable = table.columns.slice()
-  mutable.splice(index, 1)
-  mutable.splice(target, 0, column)
+    if (!new Set(column).has(column)) {
+      columns.push([column])
+    }
 
-  return { ...table, columns: mutable }
+    excluded.delete(column)
+  })
+  return table
 }
 
-export function deleteColumn(column: Column, table: Table) {
-  const row_data = new Map(table.row_data)
-  for (const [key, data] of row_data.entries()) {
-    row_data.set(key, unset(column.id, data))
-  }
-  const columns = table.columns.filter((col) => col.id !== column.id)
-  return { columns, row_data }
-}
+export function moveColumn(
+  target: number | 'left' | 'right',
+  column: Column,
+  table: YTable
+): YTable {
+  table.doc?.transact(() => {
+    const [columns] = getStructure(table)
 
-type Alteration = Partial<Column> & { id: Column['id']; fill?: string }
+    let from = -1
+    for (let i = 0; i < columns.length; i++) {
+      if (columns.get(i) === column) {
+        from = i
+      }
+    }
 
-export function alterColumn(
-  { id, fill, ...changes }: Alteration,
-  table: Table
-) {
-  const columns = table.columns.map((col) =>
-    col.id === id ? { ...col, ...changes } : col
-  )
-  const newTable: Table = { ...table, columns }
-  if (fill != null) {
-    newTable.row_data = new Map(table.row_data)
-    for (const [key, data] of newTable.row_data.entries()) {
-      newTable.row_data.set(key, { ...data, [id]: fill })
+    if (from < 0) {
+      return
     }
-  }
-  return newTable
-}
 
-export function setCellData(
-  rowId: string,
-  col: Column,
-  newData: string,
-  table: Table
-) {
-  const row_data = new Map(table.row_data)
-  row_data.set(rowId, { ...(row_data.get(rowId) || {}), [col.id]: newData })
-  return { ...table, row_data }
-}
+    const normalizedTarget =
+      typeof target === 'string'
+        ? target === 'left'
+          ? from - 1
+          : from + 1
+        : target
 
-export function deleteRowData(id: string, table: Table) {
-  const row_data = new Map(table.row_data)
-  row_data.delete(id)
-  return { ...table, row_data }
-}
+    if (normalizedTarget < 0 || normalizedTarget === from) {
+      return
+    }
 
-function unset<T, K extends keyof T>(
-  prop: K,
-  { [prop]: _remove, ...rest }: T
-): Omit<T, K> {
-  return rest
+    columns.delete(from)
+    columns.insert(Math.min(normalizedTarget, columns.length), [column])
+  })
+  return table
 }
 
-function getCols(ytable: YTable): YArray<YMap<string>> {
-  let cols = ytable.get(0)
-  if (!(cols instanceof YArray)) {
-    ytable.insert(0, [new YArray()])
-    cols = ytable.get(0)
-  }
-  return cols as YArray<YMap<string>>
+export function deleteColumn(column: Column, table: YTable): YTable {
+  table.doc?.transact(() => {
+    const [columns, excluded] = getStructure(table)
+    for (let i = 0; i < columns.length; i++) {
+      if (columns.get(i) === column) {
+        columns.delete(i)
+      }
+    }
+
+    excluded.set(column, column)
+  })
+  return table
 }
 
-function getRows(ytable: YTable): YMap<YMap<string>> {
-  let rows = ytable.get(1)
-  if (!(rows instanceof YMap)) {
-    ytable.insert(0, [new YMap()])
-    rows = ytable.get(0)
-  }
-  return rows as YMap<YMap<string>>
+export function renameColumn(
+  column: Column,
+  name: string,
+  table: YTable,
+  rows: YMap<string>[] = []
+) {
+  table.doc?.transact(() => {
+    const [columns] = getStructure(table)
+    const newKey = isDataPropCol(column)
+      ? makeDataPropCol(name, getDataPropColProp(column))
+      : makePropKey(name, getPropType(column))
+
+    if (isPropKey(column)) {
+      for (const row of rows) {
+        row.set(newKey, row.get(column) || '')
+        row.delete(column)
+      }
+    }
+
+    for (let i = 0; i < columns.length; i++) {
+      if (columns.get(i) === column) {
+        columns.delete(i)
+        columns.insert(i, [newKey])
+      }
+    }
+  })
+  return table
+}
+
+export function setColumnType(
+  column: PropKey,
+  type: PropType,
+  table: YTable,
+  rows: YMap<string>[] = []
+): YTable {
+  table.doc?.transact(() => {
+    const [columns] = getStructure(table)
+    const newKey = makePropKey(getPropName(column), type)
+    for (const row of rows) {
+      row.set(newKey, '')
+      row.delete(column)
+    }
+
+    for (let i = 0; i < columns.length; i++) {
+      if (columns.get(i) === column) {
+        columns.delete(i)
+        columns.insert(i, [newKey])
+      }
+    }
+  })
+
+  return table
 }
 
-function isColumn(col: any): col is Column {
-  return col.id != null && col.name != null && col.data_type != null
+export function getActiveColumns(
+  table: YTable,
+  additional: Column[] = []
+): Column[] {
+  const [columns, excluded] = getStructure(table)
+  return columns
+    .toArray()
+    .concat(additional.filter(notIn(new Set(columns))))
+    .filter(notIn(new Set(excluded.keys())))
+    .filter(isColumn)
 }
 
-export function parseFrom(ytable: YTable): Table {
-  let cols = getCols(ytable)
-  let rows = getRows(ytable)
+export function sanitize(table: YTable) {
+  const [columns, excluded] = getStructure(table)
 
-  const columns: Column[] = []
-  for (const col of cols) {
-    const parsedCol = {
-      id: col.get('id'),
-      name: col.get('name'),
-      data_type: col.get('data_type'),
-      default: col.get('default'),
-    }
-    if (isColumn(parsedCol)) {
-      columns.push(parsedCol)
+  for (let i = columns.length - 1; i >= 0; i--) {
+    if (!isColumn(columns.get(i))) {
+      columns.delete(i)
     }
   }
 
-  const row_data: Table['row_data'] = new Map()
-  for (const [id, row] of rows.entries()) {
-    row_data.set(id, Object.fromEntries(row.entries()))
+  for (const key of excluded.keys()) {
+    if (!isColumn(key)) {
+      excluded.delete(key)
+    }
   }
 
-  return { columns, row_data }
+  return table
 }
 
-type YTable = YArray<YArray<YMap<string>> | YMap<YMap<string>>>
-export function syncTo(ytable: YTable, table: Table, origin?: any) {
-  let cols = getCols(ytable)
-  let rows = getRows(ytable)
+function getStructure(table: YTable): [YArray<string>, YMap<string>] {
+  let cols = table.get('columns')
+  if (!(cols instanceof YArray)) {
+    table.set('columns', new YArray())
+    cols = table.get('columns')
+  }
 
-  if (ytable.doc == null) {
-    return false
+  let excluded = table.get('excluded')
+  if (!(excluded instanceof YMap)) {
+    table.set('excluded', new YMap())
+    excluded = table.get('excluded')
   }
 
-  ytable.doc.transact(() => {
-    resize(table.columns.length, () => new YMap<string>(), cols)
+  return [cols as YArray<string>, excluded as YMap<string>]
+}
 
-    for (const [i, column] of table.columns.entries()) {
-      syncObject(column, cols.get(i))
-    }
+export function getColumnName(col: Column): string {
+  return isDataPropCol(col) ? getDataPropColName(col) : getPropName(col)
+}
 
-    for (const [key, row] of table.row_data.entries()) {
-      let map = rows.get(key)
-      if (map == null) {
-        map = new YMap()
-        rows.set(key, map)
-      }
-      syncObject(row, map)
-    }
-  }, origin)
+export function makeDataPropCol(name: string, prop: string): DataPropCol {
+  return `prop:${name}:${prop}`
+}
 
-  return true
+export function isColumn(str: any): str is Column {
+  return isDataPropCol(str) || isPropKey(str)
 }
 
-function syncObject(obj: Record<string, any>, yMap: YMap<any>) {
-  const existingKeys = new Set(yMap.keys())
-  for (const [key, value] of Object.entries(obj)) {
-    existingKeys.delete(key)
-    const currentValue = yMap.get(key)
-    if (currentValue !== value) {
-      yMap.set(key, value)
-    }
-  }
+export function isDataPropCol(str: any): str is DataPropCol {
+  return (
+    typeof str === 'string' &&
+    str.startsWith('prop:') &&
+    str.split(':').length === 3
+  )
+}
 
-  for (const key of existingKeys.values()) {
-    yMap.delete(key)
-  }
+export function getDataPropColName(col: DataPropCol): string {
+  return col.split(':')[1]
 }
 
-function resize<T>(
-  length: number,
-  fill: (i: number) => T,
-  arr: YArray<T>
-): YArray<T> {
-  const diff = length - arr.length
-  if (diff > 0) {
-    for (let i = 0; i < diff; i++) {
-      arr.push([fill(arr.length + i)])
-    }
-  } else if (diff < 0) {
-    arr.delete(arr.length + diff)
-  }
-  return arr
+export function getDataPropColProp(col: DataPropCol): string {
+  return col.split(':')[2]
+}
+
+function notIn<T>(set: Set<T>) {
+  return (item: T) => !set.has(item)
 }

From 1df6a54812b32cb297a11cd029de3f9b43b69215 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Fri, 3 Sep 2021 17:42:12 +0900
Subject: [PATCH 061/106] block table api hook

---
 src/cloud/lib/hooks/useBlockTable.ts | 158 +++++++++++++++++++++++++++
 1 file changed, 158 insertions(+)
 create mode 100644 src/cloud/lib/hooks/useBlockTable.ts

diff --git a/src/cloud/lib/hooks/useBlockTable.ts b/src/cloud/lib/hooks/useBlockTable.ts
new file mode 100644
index 0000000000..66d71f8b74
--- /dev/null
+++ b/src/cloud/lib/hooks/useBlockTable.ts
@@ -0,0 +1,158 @@
+import { Doc as YDoc } from 'yjs'
+import { useEffect, useMemo, useState } from 'react'
+import { TableBlock } from '../../api/blocks'
+import { AbstractType, YMap } from 'yjs/dist/src/internals'
+import { isPropKey, PropKey, PropType } from '../blocks/props'
+import {
+  addColumn,
+  Column,
+  deleteColumn,
+  getActiveColumns,
+  getYTable,
+  isColumn,
+  moveColumn,
+  renameColumn,
+  setColumnType,
+  YTable,
+} from '../blocks/table'
+
+export interface Actions {
+  addColumn: (key: Column) => void
+  deleteColumn: (key: Column) => void
+  renameColumn: (key: Column, name: string) => void
+  moveColumn: (key: Column, direction: 'left' | 'right') => void
+  setColumnType: (key: PropKey, type: PropType) => void
+  setCell: (row: string, col: Column, data: string) => void
+}
+
+interface State {
+  columns: Column[]
+  rowData: Map<string, Record<Column, string>>
+}
+
+export function useBlockTable(block: TableBlock, ydoc: YDoc) {
+  const ytable = useMemo(() => {
+    return getYTable(block.id, ydoc)
+  }, [block.id, ydoc])
+  const yrows = useMemo(() => {
+    return new Map(block.children.map(({ id }) => [id, ydoc.getMap(id)]))
+  }, [block.children, ydoc])
+  const actions = useMemo(() => {
+    return buildActions(ytable, yrows)
+  }, [ytable, yrows])
+  const [state, setState] = useState<State>(() => {
+    const rowData = Array.from(yrows).map<[string, Record<string, string>]>(
+      ([id, map]) => [id, ymapToPropMap(map)]
+    )
+    return {
+      columns: getActiveColumns(
+        ytable,
+        getAvailableKeys(rowData.map(([, map]) => map))
+      ),
+      rowData: new Map(rowData),
+    }
+  })
+
+  useEffect(() => {
+    return subscribeDeep(ytable, () => {
+      setState((prev) => {
+        return {
+          ...prev,
+          columns: getActiveColumns(
+            ytable,
+            getAvailableKeys(Array.from(prev.rowData.values()))
+          ),
+        }
+      })
+    })
+  }, [ytable])
+
+  useEffect(() => {
+    const unsubscribes = Array.from(yrows).map(([id, map]) =>
+      subscribe(map, () => {
+        setState((prev) => {
+          const newProps = Array.from(map.keys())
+            .filter(notIn(new Set<string>(prev.columns)))
+            .filter(isColumn)
+          const newMap = new Map(prev.rowData)
+          newMap.set(id, ymapToPropMap(map))
+          return {
+            columns:
+              newProps.length > 0
+                ? prev.columns.concat(newProps)
+                : prev.columns,
+            rowData: newMap,
+          }
+        })
+      })
+    )
+
+    return () => {
+      for (const unsubscribe of unsubscribes) {
+        unsubscribe()
+      }
+    }
+  }, [yrows])
+
+  return {
+    state,
+    actions,
+  }
+}
+
+function buildActions(
+  ytable: YTable,
+  rows: Map<string, YMap<string>>
+): Actions {
+  return {
+    addColumn: (key) => addColumn(key, ytable),
+    deleteColumn: (key) => deleteColumn(key, ytable),
+    renameColumn: (key, name) => {
+      renameColumn(key, name, ytable, Array.from(rows.values()))
+    },
+    moveColumn: (key, direction) => moveColumn(direction, key, ytable),
+    setColumnType: (key, type) => {
+      setColumnType(key, type, ytable, Array.from(rows.values()))
+    },
+    setCell: (row, key, value) => {
+      console.log(row, key, value)
+      if (rows.has(row)) {
+        rows.get(row)!.set(key, value)
+      }
+    },
+  }
+}
+
+function subscribe<T extends AbstractType<any>>(
+  map: T,
+  fn: ArgsType<T['observe']>[0]
+) {
+  map.observe(fn)
+  return () => map.unobserve(fn)
+}
+
+function subscribeDeep<T extends AbstractType<any>>(
+  map: T,
+  fn: ArgsType<T['observeDeep']>[0]
+) {
+  map.observeDeep(fn)
+  return () => map.unobserveDeep(fn)
+}
+
+function getAvailableKeys(maps: Record<string, string>[]): PropKey[] {
+  return Array.from(
+    new Set(
+      maps.flatMap((map) => Array.from(Object.keys(map)).filter(isPropKey))
+    )
+  )
+}
+
+function ymapToPropMap(map: YMap<string>): Record<PropKey, string> {
+  return Object.fromEntries(
+    Array.from(map.entries()).filter(([key]) => isPropKey(key))
+  )
+}
+
+function notIn<T>(set: Set<T>) {
+  return (item: T) => !set.has(item)
+}

From 3e125e6ca6ca1c587907f99fdc2adc111f4b4834 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Fri, 3 Sep 2021 17:43:43 +0900
Subject: [PATCH 062/106] Update table component to use new Table Block hook

---
 .../{views/Table => props}/DataTypeMenu.tsx   |   6 +-
 .../Blocks/views/Table/ColumnSettings.tsx     |  75 ++++---
 .../Blocks/views/Table/TableSettings.tsx      |  76 ++++---
 .../components/Blocks/views/Table/index.tsx   | 193 +++++++++++-------
 4 files changed, 211 insertions(+), 139 deletions(-)
 rename src/cloud/components/Blocks/{views/Table => props}/DataTypeMenu.tsx (88%)

diff --git a/src/cloud/components/Blocks/views/Table/DataTypeMenu.tsx b/src/cloud/components/Blocks/props/DataTypeMenu.tsx
similarity index 88%
rename from src/cloud/components/Blocks/views/Table/DataTypeMenu.tsx
rename to src/cloud/components/Blocks/props/DataTypeMenu.tsx
index 1311f058f8..f5e02ceee7 100644
--- a/src/cloud/components/Blocks/views/Table/DataTypeMenu.tsx
+++ b/src/cloud/components/Blocks/props/DataTypeMenu.tsx
@@ -6,11 +6,11 @@ import {
   mdiText,
 } from '@mdi/js'
 import React from 'react'
-import MetadataContainerRow from '../../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
-import { DataType } from '../../../../lib/blocks/table'
+import MetadataContainerRow from '../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
+import { PropType } from '../../../lib/blocks/props'
 
 interface DataTypeMenuProps {
-  onSelect: (type: DataType) => void
+  onSelect: (type: PropType) => void
 }
 
 const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => {
diff --git a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
index ed3920b20e..e3a2bc80e0 100644
--- a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
@@ -4,20 +4,33 @@ import {
   mdiArrowRightBold,
   mdiTrashCanOutline,
 } from '@mdi/js'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import FormInput from '../../../../../design/components/molecules/Form/atoms/FormInput'
 import MetadataContainerBreak from '../../../../../design/components/organisms/MetadataContainer/atoms/MetadataContainerBreak'
 import MetadataContainerRow from '../../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
 import { useModal } from '../../../../../design/lib/stores/modal'
 import styled from '../../../../../design/lib/styled'
-import { Column, DataType } from '../../../../lib/blocks/table'
+import {
+  getPropType,
+  isPropKey,
+  makePropKey,
+  PropKey,
+  PropType,
+} from '../../../../lib/blocks/props'
+import {
+  Column,
+  getColumnName,
+  getDataPropColProp,
+  isDataPropCol,
+  makeDataPropCol,
+} from '../../../../lib/blocks/table'
 import { capitalize } from '../../../../lib/utils/string'
-import DataTypeMenu from './DataTypeMenu'
+import DataTypeMenu from '../../props/DataTypeMenu'
 
 interface ColumnSettingsProps {
   col: Column
-  setColName: (name: string, col: Column) => void
-  setColDataType: (type: DataType, col: Column) => void
+  setColName: (col: Column, name: string) => void
+  setColDataType: (col: PropKey, type: PropType) => void
   deleteCol: (col: Column) => void
   moveColumn: (col: Column, direction: 'left' | 'right') => void
 }
@@ -29,33 +42,50 @@ const ColumnSettings = ({
   deleteCol,
   moveColumn,
 }: ColumnSettingsProps) => {
-  const [name, setName] = useState(col.name)
+  const [colKey, setColKey] = useState(col)
+  const [name, setName] = useState(getColumnName(col))
   const { openContextModal, closeAllModals } = useModal()
 
   const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
     (ev) => {
       setName(ev.target.value)
-      setColName(ev.target.value, col)
+      setColName(colKey, ev.target.value)
+      setColKey(
+        isDataPropCol(colKey)
+          ? makeDataPropCol(ev.target.value, getDataPropColProp(colKey))
+          : makePropKey(ev.target.value, getPropType(colKey))
+      )
     },
-    [col]
+    [colKey, setColName]
   )
 
+  useEffect(() => {
+    setColKey(col)
+  }, [col])
+
   const openTypeSelector: React.MouseEventHandler = useCallback(
     (ev) => {
-      openContextModal(
-        ev,
-        <DataTypeMenu
-          onSelect={(type) => {
-            setColDataType(type, col)
-            closeAllModals()
-          }}
-        />,
-        { width: 300, keepAll: true }
-      )
+      if (isPropKey(colKey)) {
+        openContextModal(
+          ev,
+          <DataTypeMenu
+            onSelect={(type) => {
+              setColDataType(colKey, type)
+              setColKey(makePropKey(name, type))
+              closeAllModals()
+            }}
+          />,
+          { width: 300, keepAll: true }
+        )
+      }
     },
-    [col]
+    [name, colKey, closeAllModals, openContextModal, setColDataType]
   )
 
+  const dataType = useMemo(() => {
+    return isDataPropCol(colKey) ? 'prop' : getPropType(colKey)
+  }, [colKey])
+
   return (
     <Container>
       <MetadataContainerRow row={{ type: 'header', content: 'NAME' }} />
@@ -63,16 +93,15 @@ const ColumnSettings = ({
       <MetadataContainerRow
         row={{
           type: 'header',
-          content:
-            col.data_type === 'prop' ? 'GITHUB PARAMETER' : 'PROPERTY TYPE',
+          content: dataType === 'prop' ? 'GITHUB PARAMETER' : 'PROPERTY TYPE',
         }}
       />
-      {col.data_type !== 'prop' && (
+      {dataType !== 'prop' && (
         <MetadataContainerRow
           row={{
             type: 'button',
             props: {
-              label: capitalize(col.data_type),
+              label: capitalize(dataType),
               iconPath: mdiAccountCircleOutline,
               onClick: openTypeSelector,
             },
diff --git a/src/cloud/components/Blocks/views/Table/TableSettings.tsx b/src/cloud/components/Blocks/views/Table/TableSettings.tsx
index e08cdc0d21..274934bf71 100644
--- a/src/cloud/components/Blocks/views/Table/TableSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/TableSettings.tsx
@@ -1,21 +1,23 @@
-import { flip } from 'ramda'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import Switch from '../../../../../design/components/atoms/Switch'
 import MetadataContainerBreak from '../../../../../design/components/organisms/MetadataContainer/atoms/MetadataContainerBreak'
 import MetadataContainerRow from '../../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
 import styled from '../../../../../design/lib/styled'
+import { makePropKey, PropType } from '../../../../lib/blocks/props'
 import {
-  addColumn,
-  DataType,
-  deleteColumn,
-  Table,
+  Column,
+  getDataPropColProp,
+  isDataPropCol,
+  makeDataPropCol,
 } from '../../../../lib/blocks/table'
 import { capitalize } from '../../../../lib/utils/string'
-import DataTypeMenu from './DataTypeMenu'
+import DataTypeMenu from '../../props/DataTypeMenu'
 
 interface TableSettingsProps {
-  table: Table
-  updateTable: (table: Table, shouldClose?: boolean) => void
+  columns: Column[]
+  addColumn: (col: Column, shouldClose?: boolean) => void
+  deleteColumn: (col: Column, shouldClose?: boolean) => void
+  subscribe: (observer: (cols: Column[]) => void) => () => void
 }
 
 const GITHUB_PROPS = [
@@ -31,52 +33,43 @@ const GITHUB_PROPS = [
   'labels',
   'pull_request',
 ] as const
-const TableSettings = ({ table, updateTable }: TableSettingsProps) => {
-  const [internal, setInternal] = useState(table)
+const TableSettings = ({
+  columns,
+  addColumn,
+  deleteColumn,
+  subscribe,
+}: TableSettingsProps) => {
+  const [internal, setInternal] = useState(columns)
+
+  useEffect(() => {
+    return subscribe(setInternal)
+  }, [subscribe])
 
   const activeProps = useMemo(() => {
-    return new Set(
-      internal.columns
-        .filter((col) => col.data_type === 'prop')
-        .map((col) => col.default)
+    return new Map(
+      internal
+        .filter(isDataPropCol)
+        .map((prop) => [getDataPropColProp(prop), prop])
     )
   }, [internal])
 
-  const setTable = useCallback(
-    (table: Table, shouldClose = false) => {
-      setInternal(table)
-      updateTable(table, shouldClose)
-    },
-    [updateTable]
-  )
-
   const toggleProp = useCallback(
     (prop: string) => {
-      const existingCols = internal.columns.filter(
-        (col) => col.data_type === 'prop' && col.default === prop
-      )
-      if (existingCols.length > 0) {
-        setTable(existingCols.reduce(flip(deleteColumn), internal))
+      const propKey = activeProps.get(prop)
+      if (propKey != null) {
+        deleteColumn(propKey)
       } else {
-        setTable(
-          addColumn(
-            { data_type: 'prop', name: capitalize(prop), default: prop },
-            internal
-          )
-        )
+        addColumn(makeDataPropCol(capitalize(prop), prop))
       }
     },
-    [internal]
+    [addColumn, deleteColumn, activeProps]
   )
 
   const insertColumn = useCallback(
-    (type: DataType) => {
-      setTable(
-        addColumn({ data_type: type, name: capitalize(type) }, internal),
-        true
-      )
+    (type: PropType) => {
+      addColumn(makePropKey(capitalize(type), type), true)
     },
-    [internal]
+    [addColumn]
   )
 
   return (
@@ -85,6 +78,7 @@ const TableSettings = ({ table, updateTable }: TableSettingsProps) => {
       {GITHUB_PROPS.map((prop) => {
         return (
           <MetadataContainerRow
+            key={prop}
             className='table__settings__toggle'
             row={{
               type: 'content',
diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
index b485a57f39..91b11f84fd 100644
--- a/src/cloud/components/Blocks/views/Table/index.tsx
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -1,15 +1,12 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { ViewProps } from '../../BlockContent'
+import React, { useCallback, useEffect, useRef } from 'react'
+import { ViewProps } from '../'
 import { mdiCog, mdiPlus } from '@mdi/js'
 import GithubIssueForm from '../../forms/GithubIssueForm'
 import {
-  alterColumn,
   Column,
-  deleteColumn,
-  moveColumn,
-  parseFrom,
-  setCellData,
-  syncTo,
+  getColumnName,
+  getDataPropColProp,
+  isDataPropCol,
 } from '../../../../lib/blocks/table'
 import TextProp from '../../props/TextProp'
 import CheckboxProp from '../../props/CheckboxProp'
@@ -25,48 +22,54 @@ import { Block, TableBlock } from '../../../../api/blocks'
 import { useModal } from '../../../../../design/lib/stores/modal'
 import Icon from '../../../../../design/components/atoms/Icon'
 import Button from '../../../../../design/components/atoms/Button'
-import { isNumberString, isUrlOrPath } from '../../../../lib/utils/string'
+import {
+  capitalize,
+  isNumberString,
+  isUrlOrPath,
+} from '../../../../lib/utils/string'
 import styled from '../../../../../design/lib/styled'
 import { StyledUserIcon } from '../../../UserIcon'
 import { BlockDataProps } from '../../data/types'
+import { getPropType } from '../../../../lib/blocks/props'
+import { useBlockTable } from '../../../../lib/hooks/useBlockTable'
+import BlockIcon from '../../BlockIcon'
 
 type GithubCellProps = BlockDataProps<TableBlock['children'][number]>
 
 const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
   const { openModal, openContextModal, closeAllModals } = useModal()
-  const realtimeRef = useRef(realtime.doc.getArray(block.id))
-  const [table, setTable] = useState(() => {
-    const arr = realtime.doc.getArray(block.id)
-    return parseFrom(arr as ArgsType<typeof parseFrom>[0])
-  })
-  const originRef = useRef({})
+  const { state, actions: tableActions } = useBlockTable(block, realtime.doc)
 
+  const subscriptionsRef = useRef<Set<(col: Column[]) => void>>(new Set())
   useEffect(() => {
-    const yarray = realtime.doc.getArray(block.id)
-    const listener: ArgsType<typeof yarray['observeDeep']>[0] = (_ev, tr) => {
-      if (tr.origin !== originRef.current) {
-        setTable(parseFrom(yarray as ArgsType<typeof parseFrom>[0]))
-      }
-    }
-    yarray.observeDeep(listener)
-    realtimeRef.current = yarray
-    return () => {
-      yarray.unobserveDeep(listener)
+    for (const subscription of subscriptionsRef.current) {
+      subscription(state.columns)
     }
-  }, [realtime])
+  }, [state.columns])
 
+  const tableActionsRef = useRef(tableActions)
   useEffect(() => {
-    syncTo(realtimeRef.current as any, table, originRef.current)
-  }, [table])
+    tableActionsRef.current = tableActions
+  }, [tableActions])
 
   const openTableSettings: React.MouseEventHandler = useCallback(
     (ev) => {
       openContextModal(
         ev,
         <TableSettings
-          table={table}
-          updateTable={(table, shouldClose) => {
-            setTable(table)
+          columns={state.columns}
+          subscribe={(fn) => {
+            subscriptionsRef.current.add(fn)
+            return () => subscriptionsRef.current.delete(fn)
+          }}
+          addColumn={(col, shouldClose) => {
+            tableActionsRef.current.addColumn(col)
+            if (shouldClose) {
+              closeAllModals()
+            }
+          }}
+          deleteColumn={(col, shouldClose) => {
+            tableActionsRef.current.deleteColumn(col)
             if (shouldClose) {
               closeAllModals()
             }
@@ -75,7 +78,7 @@ const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
         { alignment: 'bottom-right' }
       )
     },
-    [openContextModal, table]
+    [openContextModal, closeAllModals, state.columns]
   )
 
   const openColumnSettings = useCallback(
@@ -84,30 +87,24 @@ const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
         ev,
         <ColumnSettings
           col={col}
-          setColName={(name, col) =>
-            setTable((table) => alterColumn({ ...col, name }, table))
+          setColName={(col, name) =>
+            tableActionsRef.current.renameColumn(col, name)
           }
-          setColDataType={(data_type, col) =>
-            setTable((table) => alterColumn({ ...col, data_type }, table))
+          setColDataType={(col, type) =>
+            tableActionsRef.current.setColumnType(col, type)
           }
           deleteCol={(col) => {
-            setTable((table) => deleteColumn(col, table))
+            tableActionsRef.current.deleteColumn(col)
             closeAllModals()
           }}
-          moveColumn={(col, dir) => {
-            setTable((table) => {
-              const index = table.columns.findIndex(
-                (column) => column.id === col.id
-              )
-              const target = dir === 'left' ? index - 1 : index + 1
-              return index > -1 ? moveColumn(target, col, table) : table
-            })
-          }}
+          moveColumn={(col, dir) =>
+            tableActionsRef.current.moveColumn(col, dir)
+          }
         />,
         { width: 220 }
       )
     },
-    []
+    [closeAllModals, openContextModal]
   )
 
   const updateIssueBlock = useCallback(
@@ -131,10 +128,6 @@ const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
     )
   }, [openModal, actions, block])
 
-  const updateCell = useCallback((rowId: string, col: Column, data: string) => {
-    setTable((table) => setCellData(rowId, col, data, table))
-  }, [])
-
   return (
     <StyledTableView>
       <div className='block__table__view__wrapper'>
@@ -142,12 +135,13 @@ const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
           <thead>
             <tr>
               <th>Title</th>
-              {table.columns.map((col) => (
+              {state.columns.map((col) => (
                 <th
+                  key={col}
                   className='block__table__view--interactable'
                   onClick={(ev) => openColumnSettings(ev, col)}
                 >
-                  {col.name}
+                  {getColumnName(col)}
                 </th>
               ))}
               <th
@@ -164,14 +158,25 @@ const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
                 <tr key={child.id}>
                   <td>
                     <div>{child.data.title}</div>
+                    {child.children.map((ancestor) => {
+                      return (
+                        <div
+                          key={ancestor.id}
+                          className='block__table__view__child__label'
+                        >
+                          <BlockIcon block={ancestor} size={16} />
+                          <span>{blockTitle(ancestor)}</span>
+                        </div>
+                      )
+                    })}
                   </td>
-                  {table.columns.map((col) => (
-                    <td key={col.id}>
+                  {state.columns.map((col) => (
+                    <td key={col}>
                       <TableCell
                         column={col}
                         row={child}
-                        data={table.row_data.get(child.id) || {}}
-                        updateCell={updateCell}
+                        data={state.rowData.get(child.id) || {}}
+                        updateCell={tableActions.setCell}
                         updateBlock={updateIssueBlock}
                       />
                     </td>
@@ -217,40 +222,42 @@ const TableCell = ({
     [column, row, updateCell]
   )
 
-  switch (column.data_type) {
-    case 'prop':
-      return (
-        <GithubCell
-          prop={column.default || ''}
-          data={row.data}
-          onUpdate={(data) => updateBlock({ ...row, data })}
-        />
-      )
+  if (isDataPropCol(column)) {
+    return (
+      <GithubCell
+        prop={getDataPropColProp(column)}
+        data={row.data}
+        onUpdate={(data) => updateBlock({ ...row, data })}
+      />
+    )
+  }
+
+  switch (getPropType(column)) {
     case 'number':
       return (
         <TextProp
-          value={data[column.id] || ''}
+          value={data[column] || ''}
           onUpdate={update}
           validation={isNumberString}
         />
       )
     case 'date':
-      return <DateProp value={data[column.id] || ''} onUpdate={update} />
+      return <DateProp value={data[column] || ''} onUpdate={update} />
     case 'url':
       return (
         <TextProp
-          value={data[column.id] || ''}
+          value={data[column] || ''}
           onUpdate={update}
           validation={isUrlOrPath}
         />
       )
     case 'checkbox':
-      return <CheckboxProp value={data[column.id] || ''} onUpdate={update} />
+      return <CheckboxProp value={data[column] || ''} onUpdate={update} />
     case 'user':
-      return <BoostUserProp value={data[column.id] || ''} onUpdate={update} />
+      return <BoostUserProp value={data[column] || ''} onUpdate={update} />
     case 'text':
     default:
-      return <TextProp value={data[column.id] || ''} onUpdate={update} />
+      return <TextProp value={data[column] || ''} onUpdate={update} />
   }
 }
 
@@ -383,6 +390,48 @@ const StyledTableView = styled.div`
   & .block__table__view__import {
     border-bottom: 1px solid ${({ theme }) => theme.colors.border.main};
   }
+
+  & .block__table__view__child__label {
+    position: relative;
+    padding-left: 18px;
+    display: flex;
+    width: 100%;
+    height: 26px;
+    white-space: nowrap;
+    font-size: ${({ theme }) => theme.sizes.fonts.df}px;
+    cursor: pointer;
+
+    align-items: center;
+    flex: 1 1 auto;
+    background: none;
+    outline: 0;
+    border: 0;
+    text-align: left;
+    color: ${({ theme }) => theme.colors.text.secondary};
+    text-decoration: none;
+    margin: 0;
+    overflow: hidden;
+
+    & > span:first-of-type {
+      flex-grow: 1;
+    }
+
+    & svg {
+      color: ${({ theme }) => theme.colors.text.subtle};
+      margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
+    }
+  }
 `
 
+function blockTitle(block: Block) {
+  switch (block.type) {
+    case 'github.issue':
+      return block.data.number != null
+        ? `#${block.data.number}`
+        : 'Github Issue'
+    default:
+      return capitalize(block.type)
+  }
+}
+
 export default TableView

From c46250aeaf76484167b0db21271c91079ac1126a Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Fri, 3 Sep 2021 17:45:41 +0900
Subject: [PATCH 063/106] Issue block to use props

---
 src/cloud/components/Blocks/BlockCreate.tsx   | 135 +++++++++++++++
 src/cloud/components/Blocks/props/index.tsx   |  40 +++++
 .../components/Blocks/views/GithubIssue.tsx   | 160 ++++++++++++++++--
 3 files changed, 320 insertions(+), 15 deletions(-)
 create mode 100644 src/cloud/components/Blocks/BlockCreate.tsx
 create mode 100644 src/cloud/components/Blocks/props/index.tsx

diff --git a/src/cloud/components/Blocks/BlockCreate.tsx b/src/cloud/components/Blocks/BlockCreate.tsx
new file mode 100644
index 0000000000..3e775eb3ce
--- /dev/null
+++ b/src/cloud/components/Blocks/BlockCreate.tsx
@@ -0,0 +1,135 @@
+import {
+  mdiCodeTags,
+  mdiFileDocumentOutline,
+  mdiPlusBoxOutline,
+  mdiTable,
+} from '@mdi/js'
+import React, { useCallback, useEffect, useRef } from 'react'
+import Icon from '../../../design/components/atoms/Icon'
+import { useModal } from '../../../design/lib/stores/modal'
+import styled from '../../../design/lib/styled'
+import { Block } from '../../api/blocks'
+import { FormProps } from './BlockContent'
+import EmbedForm from './forms/EmbedForm'
+import MarkdownForm from './forms/MarkdownForm'
+import TableForm from './forms/TableForm'
+
+const modalOptions = {
+  showCloseIcon: true,
+  width: 'small' as const,
+  title: 'Create new block',
+}
+
+const BlockCreate = ({ onSubmit }: FormProps<Block>) => {
+  const { openModal, closeAllModals } = useModal()
+
+  const onSubmitRef: React.MutableRefObject<typeof onSubmit> = useRef(
+    async (block) => {
+      await onSubmit(block)
+      closeAllModals()
+    }
+  )
+  useEffect(() => {
+    onSubmitRef.current = async (block) => {
+      await onSubmit(block)
+      closeAllModals()
+    }
+  }, [onSubmit, closeAllModals])
+
+  const createMarkdown = useCallback(() => {
+    openModal(<MarkdownForm onSubmit={callRef(onSubmitRef)} />, modalOptions)
+  }, [openModal])
+
+  const createTable = useCallback(() => {
+    openModal(<TableForm onSubmit={callRef(onSubmitRef)} />, modalOptions)
+  }, [openModal])
+
+  const createEmbed = useCallback(() => {
+    openModal(<EmbedForm onSubmit={callRef(onSubmitRef)} />, modalOptions)
+  }, [openModal])
+
+  return (
+    <BlockCreateContainer>
+      <h3>Select a block</h3>
+      <div>
+        <div onClick={createMarkdown} className='block__view__add__selector'>
+          <Icon size={34} path={mdiFileDocumentOutline} />
+          <span>Markdown</span>
+        </div>
+        <div onClick={createTable} className='block__view__add__selector'>
+          <Icon size={34} path={mdiTable} />
+          <span>Table</span>
+        </div>
+        <div onClick={createEmbed} className='block__view__add__selector'>
+          <Icon size={34} path={mdiCodeTags} />
+          <span>Embed</span>
+        </div>
+      </div>
+    </BlockCreateContainer>
+  )
+}
+
+export const ToggleBlockCreate = ({
+  onSubmit,
+  open,
+  onChange,
+}: FormProps<Block> & {
+  open: boolean
+  onChange: (open: boolean) => void
+}) => {
+  return (
+    <>
+      <ToggleBlockCreateContainer onClick={() => onChange(!open)}>
+        <Icon path={mdiPlusBoxOutline} size={16} />
+        <span>Add Block</span>
+      </ToggleBlockCreateContainer>
+      {open && <BlockCreate onSubmit={onSubmit} />}
+    </>
+  )
+}
+
+const BlockCreateContainer = styled.div`
+  margin: 0 auto;
+  margin-top: ${({ theme }) => theme.sizes.spaces.df}px;
+  border-radius: 2px;
+  background-color: ${({ theme }) => theme.colors.background.secondary};
+  padding: ${({ theme }) => theme.sizes.spaces.df}px 0;
+  width: 60%;
+  & > h3 {
+    text-align: center;
+    margin-top: 0;
+  }
+  & > div {
+    display: flex;
+    justify-content: space-evenly;
+    & .block__view__add__selector {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      span {
+        margin-top: ${({ theme }) => theme.sizes.spaces.sm}px;
+      }
+    }
+  }
+`
+
+const ToggleBlockCreateContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+
+  border: 1px solid ${({ theme }) => theme.colors.border.main};
+  padding: ${({ theme }) => theme.sizes.spaces.df}px;
+  & span {
+    margin-left: ${({ theme }) => theme.sizes.spaces.df}px;
+  }
+`
+
+function callRef<T, U>(
+  ref: React.MutableRefObject<(...args: T[]) => U>
+): (...args: T[]) => U {
+  return (...args) => ref.current(...args)
+}
+
+export default BlockCreate
diff --git a/src/cloud/components/Blocks/props/index.tsx b/src/cloud/components/Blocks/props/index.tsx
new file mode 100644
index 0000000000..396e223be7
--- /dev/null
+++ b/src/cloud/components/Blocks/props/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import { PropType } from '../../../lib/blocks/props'
+import TextProp from './TextProp'
+import CheckboxProp from './CheckboxProp'
+import DateProp from './DateProp'
+import BoostUserProp from './BoostUserProp'
+import { isNumberString, isUrlOrPath } from '../../../lib/utils/string'
+
+interface BlockPropProps {
+  type: PropType
+  value: string
+  onChange: (value: string) => void
+}
+const BlockProp = ({ type, value, onChange }: BlockPropProps) => {
+  switch (type) {
+    case 'number':
+      return (
+        <TextProp
+          value={value}
+          onUpdate={onChange}
+          validation={isNumberString}
+        />
+      )
+    case 'date':
+      return <DateProp value={value} onUpdate={onChange} />
+    case 'url':
+      return (
+        <TextProp value={value} onUpdate={onChange} validation={isUrlOrPath} />
+      )
+    case 'checkbox':
+      return <CheckboxProp value={value} onUpdate={onChange} />
+    case 'user':
+      return <BoostUserProp value={value} onUpdate={onChange} />
+    case 'text':
+    default:
+      return <TextProp value={value} onUpdate={onChange} />
+  }
+}
+
+export default BlockProp
diff --git a/src/cloud/components/Blocks/views/GithubIssue.tsx b/src/cloud/components/Blocks/views/GithubIssue.tsx
index d8b1024133..94887fb19c 100644
--- a/src/cloud/components/Blocks/views/GithubIssue.tsx
+++ b/src/cloud/components/Blocks/views/GithubIssue.tsx
@@ -1,11 +1,96 @@
-import React from 'react'
-import { ViewProps } from '../BlockContent'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { BlockView, ViewProps } from './'
 import { mdiLink } from '@mdi/js'
 import styled from '../../../../design/lib/styled'
 import Icon from '../../../../design/components/atoms/Icon'
-import { GithubIssueBlock } from '../../../api/blocks'
+import { Block, GithubIssueBlock } from '../../../api/blocks'
+import { useBlockProps } from '../../../lib/hooks/useBlockProps'
+import {
+  getPropName,
+  getPropType,
+  makePropKey,
+  PropKey,
+  PropType,
+} from '../../../lib/blocks/props'
+import BlockProp from '../props'
+import HyperlinkProp from '../props/HyperlinkProp'
+import GitHubAssigneesData from '../data/GithubAssigneesData'
+import GithubStatusData from '../data/GithubStatusData'
+import GithubLabelsData from '../data/GithubLabelsData'
+import Button from '../../../../design/components/atoms/Button'
+import { useModal } from '../../../../design/lib/stores/modal'
+import DataTypeMenu from '../props/DataTypeMenu'
+import { capitalize } from '../../../lib/utils/string'
+import { ToggleBlockCreate } from '../BlockCreate'
+
+const GithubIssueView = ({
+  block,
+  realtime,
+  actions: blockActions,
+  canvas,
+}: ViewProps<GithubIssueBlock>) => {
+  const [propsRecord, actions] = useBlockProps(block, realtime.doc)
+  const { openContextModal, closeAllModals } = useModal()
+  const [blockSelectOpen, setBlockSelectOpen] = useState(false)
+
+  const updateBlock = useCallback(
+    async (data: GithubIssueBlock['data']) => {
+      await blockActions.update({ ...block, data: { ...block.data, ...data } })
+    },
+    [blockActions, block]
+  )
+
+  const createBlock = useCallback(
+    async (newBlock: Omit<Block, 'id'>) => {
+      await blockActions.create(newBlock, block)
+      setBlockSelectOpen(false)
+    },
+    [block, blockActions]
+  )
+
+  const createPropRef = useRef((type: PropType) => {
+    const count = Object.keys(propsRecord).reduce((acc, curr) => {
+      return getPropType(curr as PropKey) === type ? acc + 1 : acc
+    }, 0)
+    const name = `${capitalize(type)}${count > 0 ? count : ''}`
+    actions.set(makePropKey(name, type), '')
+  })
+
+  useEffect(() => {
+    createPropRef.current = (type: PropType) => {
+      const count = Object.keys(propsRecord).reduce((acc, curr) => {
+        return getPropType(curr as PropKey) === type ? acc + 1 : acc
+      }, 0)
+      const name = `${capitalize(type)}${count > 0 ? count : ''}`
+      actions.set(makePropKey(name, type), '')
+    }
+  }, [actions, propsRecord])
+
+  const openPropAdd: React.MouseEventHandler = useCallback(
+    async (ev) => {
+      openContextModal(
+        ev,
+        <div>
+          <DataTypeMenu
+            onSelect={(type) => {
+              createPropRef.current(type)
+              closeAllModals()
+            }}
+          />
+        </div>
+      )
+    },
+    [openContextModal, closeAllModals]
+  )
+
+  const props = useMemo(() => {
+    return Object.entries(propsRecord) as [PropKey, string][]
+  }, [propsRecord])
+
+  const prUrl = useMemo(() => {
+    return block.data?.pull_request?.html_url || ''
+  }, [block.data])
 
-const GithubIssueView = ({ block }: ViewProps<GithubIssueBlock>) => {
   return (
     <StyledGithubIssueView>
       <h1>{block.data.title}</h1>
@@ -24,32 +109,65 @@ const GithubIssueView = ({ block }: ViewProps<GithubIssueBlock>) => {
         <div>
           <div>Assignees</div>
           <div>
-            {block.data.assignees
-              .map((assignee: any) => assignee.login)
-              .join(', ')}
+            <GitHubAssigneesData data={block.data} onUpdate={updateBlock} />
           </div>
         </div>
         <div>
           <div>Status</div>
-          <div>{block.data.status}</div>
+          <div>
+            <GithubStatusData data={block.data} onUpdate={updateBlock} />
+          </div>
         </div>
         <div>
           <div>Labels</div>
           <div>
-            {block.data.labels.map((label: any) => label.name).join(', ')}
+            <GithubLabelsData data={block.data} onUpdate={updateBlock} />
           </div>
         </div>
         <div>
           <div>Linked PR</div>
           <div>
-            {block.data.pull_request != null && (
-              <a href={block.data.pull_request.html_url}>
-                #{block.data.pull_request.number || block.data.number}
-              </a>
-            )}
+            <HyperlinkProp href={prUrl} label={getPRNumFromUrl(prUrl)} />
           </div>
         </div>
+
+        {props.map(([key, value]) => {
+          return (
+            <div key={key}>
+              <div>{getPropName(key)}</div>
+              <div>
+                <BlockProp
+                  type={getPropType(key)}
+                  value={value}
+                  onChange={(newValue) => actions.set(key, newValue)}
+                />
+              </div>
+            </div>
+          )
+        })}
+      </div>
+      <div>
+        <Button onClick={openPropAdd}>+ Add Prop</Button>
+      </div>
+      <div className='github-issue__view__children'>
+        {block.children.map((child) => {
+          return (
+            <BlockView
+              key={child.id}
+              block={child}
+              actions={blockActions}
+              isChild={true}
+              canvas={canvas}
+              realtime={realtime}
+            />
+          )
+        })}
       </div>
+      <ToggleBlockCreate
+        open={blockSelectOpen}
+        onChange={setBlockSelectOpen}
+        onSubmit={createBlock}
+      />
     </StyledGithubIssueView>
   )
 }
@@ -61,9 +179,12 @@ const StyledGithubIssueView = styled.div`
       align-items: center;
       padding: ${({ theme }) => theme.sizes.spaces.sm}px 0;
       & > div:first-child {
-        width: 100px;
         color: ${({ theme }) => theme.colors.text.subtle};
       }
+
+      & > div {
+        min-width: 100px;
+      }
     }
 
     & a {
@@ -71,6 +192,15 @@ const StyledGithubIssueView = styled.div`
       text-decoration: none;
     }
   }
+
+  .github-issue__view__children > * {
+    margin-bottom: ${({ theme }) => theme.sizes.spaces.md}px;
+  }
 `
 
+function getPRNumFromUrl(url: string) {
+  const num = url.split('/').pop()
+  return num != null && num !== '' ? `#${num}` : url
+}
+
 export default GithubIssueView

From 7030b79a6232acf710e7d8175af622e970bb660e Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Fri, 3 Sep 2021 17:46:00 +0900
Subject: [PATCH 064/106] show children in table

---
 src/cloud/api/blocks/index.ts                 |   6 +-
 src/cloud/components/Blocks/BlockContent.tsx  |  83 ++------
 src/cloud/components/Blocks/BlockIcon.tsx     |  36 ++++
 src/cloud/components/Blocks/BlockTree.tsx     |  39 +---
 .../components/Blocks/views/Container.tsx     | 183 +++---------------
 src/cloud/components/Blocks/views/Embed.tsx   |  14 +-
 .../components/Blocks/views/Markdown.tsx      |   2 +-
 src/cloud/components/Blocks/views/index.tsx   |  84 ++++++++
 8 files changed, 176 insertions(+), 271 deletions(-)
 create mode 100644 src/cloud/components/Blocks/BlockIcon.tsx
 create mode 100644 src/cloud/components/Blocks/views/index.tsx

diff --git a/src/cloud/api/blocks/index.ts b/src/cloud/api/blocks/index.ts
index d3740d2424..ec0e985015 100644
--- a/src/cloud/api/blocks/index.ts
+++ b/src/cloud/api/blocks/index.ts
@@ -14,7 +14,11 @@ interface BlockType<
 
 export type MarkdownBlock = BlockType<'markdown', null>
 export type EmbedBlock = BlockType<'embed', { url: string }>
-export type GithubIssueBlock = BlockType<'github.issue', any>
+export type GithubIssueBlock = BlockType<
+  'github.issue',
+  any,
+  MarkdownBlock | EmbedBlock | TableBlock | ContainerBlock
+>
 export type TableBlock = BlockType<
   'table',
   { columns: Record<string, string> },
diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index e1cef6abc1..2ba910034b 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -11,13 +11,8 @@ import {
 import MarkdownForm from './forms/MarkdownForm'
 import EmbedForm from './forms/EmbedForm'
 import TableForm from './forms/TableForm'
-import TableView from './views/Table'
-import MarkdownView from './views/Markdown'
-import EmbedView from './views/Embed'
-import ContainerView from './views/Container'
-import GithubIssueView from './views/GithubIssue'
 import { Block, ContainerBlock } from '../../api/blocks'
-import { BlockActions, useDocBlocks } from '../../lib/hooks/useDocBlocks'
+import { useDocBlocks } from '../../lib/hooks/useDocBlocks'
 import { SerializedDocWithBookmark } from '../../interfaces/db/doc'
 import { useModal } from '../../../design/lib/stores/modal'
 import { useI18n } from '../../lib/hooks/useI18n'
@@ -27,20 +22,13 @@ import BlockTree from './BlockTree'
 import Icon from '../../../design/components/atoms/Icon'
 import styled from '../../../design/lib/styled'
 import { find } from '../../../design/lib/utils/tree'
-import { WebsocketProvider } from 'y-websocket'
 import useRealtime from '../../lib/editor/hooks/useRealtime'
+import { BlockView } from './views'
 
-interface Canvas extends SerializedDocWithBookmark {
+export interface Canvas extends SerializedDocWithBookmark {
   rootBlock: ContainerBlock
 }
 
-export interface ViewProps<T extends Block> {
-  block: T
-  actions: BlockActions
-  canvas: Canvas
-  realtime: WebsocketProvider
-}
-
 export interface FormProps<T extends Block> {
   onSubmit: (block: Omit<T, 'id'>) => Promise<any>
 }
@@ -101,62 +89,6 @@ const BlockContent = ({ doc }: BlockContentProps) => {
     openModal(<EmbedForm onSubmit={createBlock} />, modalOptions)
   }, [createBlock, openModal, modalOptions])
 
-  const content = useMemo(() => {
-    if (state.type === 'loading') {
-      return null
-    }
-    const active = currentBlock || state.block
-    switch (active.type) {
-      case 'container':
-        return (
-          <ContainerView
-            block={active}
-            actions={actions}
-            canvas={doc}
-            realtime={provider}
-          />
-        )
-      case 'embed':
-        return (
-          <EmbedView
-            block={active}
-            actions={actions}
-            canvas={doc}
-            realtime={provider}
-          />
-        )
-      case 'markdown':
-        return (
-          <MarkdownView
-            block={active}
-            actions={actions}
-            canvas={doc}
-            realtime={provider}
-          />
-        )
-      case 'table':
-        return (
-          <TableView
-            block={active}
-            actions={actions}
-            canvas={doc}
-            realtime={provider}
-          />
-        )
-      case 'github.issue':
-        return (
-          <GithubIssueView
-            block={active}
-            actions={actions}
-            canvas={doc}
-            realtime={provider}
-          />
-        )
-      default:
-        return <div>Block of type ${(active as any).type} is unsupported</div>
-    }
-  }, [currentBlock, state, actions, doc, provider])
-
   if (state.type === 'loading') {
     return <div>loading</div>
   }
@@ -210,7 +142,14 @@ const BlockContent = ({ doc }: BlockContentProps) => {
           )}
         </div>
       </div>
-      <div className='block__editor__view'>{content}</div>
+      <div className='block__editor__view'>
+        <BlockView
+          block={currentBlock || state.block}
+          actions={actions}
+          canvas={doc}
+          realtime={provider}
+        />
+      </div>
     </StyledBlockContent>
   )
 }
diff --git a/src/cloud/components/Blocks/BlockIcon.tsx b/src/cloud/components/Blocks/BlockIcon.tsx
new file mode 100644
index 0000000000..1284b18e37
--- /dev/null
+++ b/src/cloud/components/Blocks/BlockIcon.tsx
@@ -0,0 +1,36 @@
+import {
+  mdiCodeTags,
+  mdiFileDocumentOutline,
+  mdiGithub,
+  mdiPackageVariantClosed,
+  mdiTable,
+} from '@mdi/js'
+import React, { useMemo } from 'react'
+import Icon, { IconSize } from '../../../design/components/atoms/Icon'
+import { Block } from '../../api/blocks'
+
+interface BlockIconProps {
+  block: Block
+  size: IconSize
+}
+
+const BlockIcon = ({ block, size }: BlockIconProps) => {
+  const path = useMemo(() => {
+    if (block.type.startsWith('github')) {
+      return mdiGithub
+    }
+    switch (block.type) {
+      case 'embed':
+        return mdiCodeTags
+      case 'table':
+        return mdiTable
+      case 'markdown':
+        return mdiFileDocumentOutline
+      default:
+        return mdiPackageVariantClosed
+    }
+  }, [block.type])
+  return <Icon path={path} size={size} />
+}
+
+export default BlockIcon
diff --git a/src/cloud/components/Blocks/BlockTree.tsx b/src/cloud/components/Blocks/BlockTree.tsx
index d221fd8165..ac638fcfd0 100644
--- a/src/cloud/components/Blocks/BlockTree.tsx
+++ b/src/cloud/components/Blocks/BlockTree.tsx
@@ -1,16 +1,10 @@
-import React, { useMemo } from 'react'
-import {
-  mdiCodeTags,
-  mdiTable,
-  mdiFileDocumentOutline,
-  mdiGithub,
-  mdiPackageVariantClosed,
-  mdiTrashCanOutline,
-} from '@mdi/js'
+import React from 'react'
+import { mdiTrashCanOutline } from '@mdi/js'
 import { Block } from '../../api/blocks'
 import styled from '../../../design/lib/styled'
 import { capitalize } from '../../lib/utils/string'
-import Icon, { IconSize } from '../../../design/components/atoms/Icon'
+import Icon from '../../../design/components/atoms/Icon'
+import BlockIcon from './BlockIcon'
 
 interface BlockTreeProps {
   root: Block
@@ -145,29 +139,4 @@ const StyledBlockTree = styled.div<{ depth: number }>`
   }
 `
 
-interface BlockIconProps {
-  block: Block
-  size: IconSize
-}
-
-const BlockIcon = ({ block, size }: BlockIconProps) => {
-  const path = useMemo(() => {
-    if (block.type.startsWith('github')) {
-      return mdiGithub
-    }
-    switch (block.type) {
-      case 'embed':
-        return mdiCodeTags
-      case 'table':
-        return mdiTable
-      case 'markdown':
-        return mdiFileDocumentOutline
-      default:
-        return mdiPackageVariantClosed
-    }
-  }, [block.type])
-
-  return <Icon path={path} size={size} />
-}
-
 export default BlockTree
diff --git a/src/cloud/components/Blocks/views/Container.tsx b/src/cloud/components/Blocks/views/Container.tsx
index eaf6d51c4d..fb5998b9e7 100644
--- a/src/cloud/components/Blocks/views/Container.tsx
+++ b/src/cloud/components/Blocks/views/Container.tsx
@@ -1,148 +1,49 @@
-import React, { useState, useCallback, useMemo } from 'react'
-import { ViewProps } from '../BlockContent'
-import EmbedView from './Embed'
-import MarkdownView from './Markdown'
-import TableView from './Table'
-import {
-  mdiPlusBoxOutline,
-  mdiFileDocumentOutline,
-  mdiTable,
-  mdiCodeTags,
-} from '@mdi/js'
-import MarkdownForm from '../forms/MarkdownForm'
-import TableForm from '../forms/TableForm'
-import EmbedForm from '../forms/EmbedForm'
+import React, { useState, useCallback } from 'react'
 import { Block, ContainerBlock } from '../../../api/blocks'
-import { useModal } from '../../../../design/lib/stores/modal'
-import Icon from '../../../../design/components/atoms/Icon'
 import styled from '../../../../design/lib/styled'
-import AspectRatio from '../../../../design/components/atoms/AspectRation'
-
-interface ContainerViewProps extends ViewProps<ContainerBlock> {
-  nested?: boolean
-}
+import { ToggleBlockCreate } from '../BlockCreate'
+import { BlockView, ViewProps } from '.'
 
 const ContainerView = ({
   block,
   actions,
   canvas,
-  nested,
+  isChild,
   realtime,
-}: ContainerViewProps) => {
-  const { openModal, closeAllModals } = useModal()
+}: ViewProps<ContainerBlock>) => {
   const [addSelectOpen, setAddSelectOpen] = useState(false)
 
   const createBlock = useCallback(
     async (newBlock: Omit<Block, 'id'>) => {
       await actions.create(newBlock, block)
       setAddSelectOpen(false)
-      closeAllModals()
     },
-    [block, actions, closeAllModals]
+    [block, actions]
   )
 
-  const modalOptions = useMemo(() => {
-    return {
-      showCloseIcon: true,
-      width: 'small' as const,
-      title: 'Create new block',
-    }
-  }, [])
-
-  const createMarkdown = useCallback(() => {
-    openModal(<MarkdownForm onSubmit={createBlock} />, modalOptions)
-  }, [createBlock, openModal, modalOptions])
-
-  const createTable = useCallback(() => {
-    openModal(<TableForm onSubmit={createBlock} />, modalOptions)
-  }, [createBlock, openModal, modalOptions])
-
-  const createEmbed = useCallback(() => {
-    openModal(<EmbedForm onSubmit={createBlock} />, modalOptions)
-  }, [createBlock, openModal, modalOptions])
-
   return (
-    <StyledContainerView className={nested && 'block__view--nested'}>
+    <StyledContainerView className={isChild && 'block__view--nested'}>
       <h1>{canvas.rootBlock.id === block.id ? canvas.title : block.name}</h1>
       <div className='block__view__container__content'>
         {block.children.map((child) => {
-          switch (child.type) {
-            case 'container':
-              return (
-                <ContainerView
-                  block={child}
-                  actions={actions}
-                  nested={true}
-                  canvas={canvas}
-                  realtime={realtime}
-                />
-              )
-            case 'embed':
-              return (
-                <AspectRatio width={16} height={9}>
-                  <EmbedView
-                    block={child}
-                    actions={actions}
-                    canvas={canvas}
-                    realtime={realtime}
-                  />
-                </AspectRatio>
-              )
-            case 'markdown':
-              return (
-                <MarkdownView
-                  block={child}
-                  actions={actions}
-                  canvas={canvas}
-                  realtime={realtime}
-                />
-              )
-            case 'table':
-              return (
-                <TableView
-                  block={child}
-                  actions={actions}
-                  canvas={canvas}
-                  realtime={realtime}
-                />
-              )
-            default:
-              return (
-                <div>Block of type ${(child as any).type} is unsupported</div>
-              )
-          }
+          return (
+            <BlockView
+              key={child.id}
+              block={child}
+              actions={actions}
+              isChild={true}
+              canvas={canvas}
+              realtime={realtime}
+            />
+          )
         })}
       </div>
-      {!nested && (
-        <div
-          onClick={() => setAddSelectOpen((open) => !open)}
-          className='block__view__container__add'
-        >
-          <Icon path={mdiPlusBoxOutline} size={16} />
-          <span>Add Block</span>
-        </div>
-      )}
-      {addSelectOpen && (
-        <div className='block__view__container__add__select'>
-          <h3>Select a block</h3>
-          <div>
-            <div
-              onClick={createMarkdown}
-              className='block__view__add__selector'
-            >
-              <Icon size={34} path={mdiFileDocumentOutline} />
-              <span>Markdown</span>
-            </div>
-            <div onClick={createTable} className='block__view__add__selector'>
-              <Icon size={34} path={mdiTable} />
-              <span>Table</span>
-            </div>
-            <div onClick={createEmbed} className='block__view__add__selector'>
-              <Icon size={34} path={mdiCodeTags} />
-              <span>Embed</span>
-            </div>
-          </div>
-        </div>
+      {!isChild && (
+        <ToggleBlockCreate
+          open={addSelectOpen}
+          onChange={setAddSelectOpen}
+          onSubmit={createBlock}
+        />
       )}
     </StyledContainerView>
   )
@@ -168,44 +69,6 @@ const StyledContainerView = styled.div`
   & .block__view__container__content > * {
     margin-bottom: ${({ theme }) => theme.sizes.spaces.md}px;
   }
-
-  & .block__view__container__add {
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-
-    border: 1px solid ${({ theme }) => theme.colors.border.main};
-    padding: ${({ theme }) => theme.sizes.spaces.df}px;
-    & span {
-      margin-left: ${({ theme }) => theme.sizes.spaces.df}px;
-    }
-  }
-
-  & .block__view__container__add__select {
-    margin: 0 auto;
-    margin-top: ${({ theme }) => theme.sizes.spaces.df}px;
-    border-radius: 2px;
-    background-color: ${({ theme }) => theme.colors.background.secondary};
-    padding: ${({ theme }) => theme.sizes.spaces.df}px 0;
-    width: 60%;
-    & > h3 {
-      text-align: center;
-      margin-top: 0;
-    }
-    & > div {
-      display: flex;
-      justify-content: space-evenly;
-      & .block__view__add__selector {
-        cursor: pointer;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        span {
-          margin-top: ${({ theme }) => theme.sizes.spaces.sm}px;
-        }
-      }
-    }
-  }
 `
 
 export default ContainerView
diff --git a/src/cloud/components/Blocks/views/Embed.tsx b/src/cloud/components/Blocks/views/Embed.tsx
index ab3d0e3b84..ccf5770b6a 100644
--- a/src/cloud/components/Blocks/views/Embed.tsx
+++ b/src/cloud/components/Blocks/views/Embed.tsx
@@ -1,9 +1,19 @@
 import React from 'react'
+import { ViewProps } from '.'
+import AspectRatio from '../../../../design/components/atoms/AspectRation'
 import styled from '../../../../design/lib/styled'
 import { EmbedBlock } from '../../../api/blocks'
-import { ViewProps } from '../BlockContent'
 
-const EmbedView = ({ block }: ViewProps<EmbedBlock>) => {
+const EmbedView = ({ block, isChild }: ViewProps<EmbedBlock>) => {
+  if (isChild) {
+    return (
+      <AspectRatio width={16} height={9}>
+        <StyledEmbedView>
+          <iframe src={block.data.url} allowFullScreen={true}></iframe>
+        </StyledEmbedView>
+      </AspectRatio>
+    )
+  }
   return (
     <StyledEmbedView>
       <iframe src={block.data.url} allowFullScreen={true}></iframe>
diff --git a/src/cloud/components/Blocks/views/Markdown.tsx b/src/cloud/components/Blocks/views/Markdown.tsx
index 282e36d4f4..35ea21f364 100644
--- a/src/cloud/components/Blocks/views/Markdown.tsx
+++ b/src/cloud/components/Blocks/views/Markdown.tsx
@@ -3,7 +3,7 @@ import styled from '../../../../design/lib/styled'
 import { MarkdownBlock } from '../../../api/blocks'
 import CodeMirrorEditor from '../../../lib/editor/components/CodeMirrorEditor'
 import { CodeMirrorKeyMap, useSettings } from '../../../lib/stores/settings'
-import { ViewProps } from '../BlockContent'
+import { ViewProps } from './'
 import MarkdownPreview from '../../MarkdownView'
 import { CodemirrorBinding } from 'y-codemirror'
 import Spinner from '../../../../design/components/atoms/Spinner'
diff --git a/src/cloud/components/Blocks/views/index.tsx b/src/cloud/components/Blocks/views/index.tsx
new file mode 100644
index 0000000000..d0b3f5e20f
--- /dev/null
+++ b/src/cloud/components/Blocks/views/index.tsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import { WebsocketProvider } from 'y-websocket'
+import { Block } from '../../../api/blocks'
+import { BlockActions } from '../../../lib/hooks/useDocBlocks'
+import Markdown from './Markdown'
+import { Canvas } from '../BlockContent'
+import Container from './Container'
+import Embed from './Embed'
+import Table from './Table'
+import GithubIssueView from './GithubIssue'
+
+export interface ViewProps<T extends Block> {
+  block: T
+  actions: BlockActions
+  canvas: Canvas
+  realtime: WebsocketProvider
+  isChild?: boolean
+}
+export const BlockView = ({
+  block,
+  actions,
+  canvas,
+  realtime,
+  isChild,
+}: ViewProps<Block>) => {
+  switch (block.type) {
+    case 'container':
+      return (
+        <Container
+          block={block}
+          actions={actions}
+          isChild={isChild}
+          canvas={canvas}
+          realtime={realtime}
+        />
+      )
+    case 'embed':
+      return (
+        <Embed
+          block={block}
+          actions={actions}
+          isChild={isChild}
+          canvas={canvas}
+          realtime={realtime}
+        />
+      )
+    case 'markdown':
+      return (
+        <Markdown
+          block={block}
+          actions={actions}
+          isChild={isChild}
+          canvas={canvas}
+          realtime={realtime}
+        />
+      )
+    case 'table':
+      return (
+        <Table
+          block={block}
+          actions={actions}
+          isChild={isChild}
+          canvas={canvas}
+          realtime={realtime}
+        />
+      )
+    case 'github.issue':
+      return (
+        <GithubIssueView
+          block={block}
+          actions={actions}
+          isChild={isChild}
+          canvas={canvas}
+          realtime={realtime}
+        />
+      )
+    default:
+      return (
+        <div>
+          Block of type ${(block as any).type || 'unknown'} is unsupported
+        </div>
+      )
+  }
+}

From 4ca3eab3a959a98cb9f5be4eeee07692ec4fc11a Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Fri, 3 Sep 2021 17:54:28 +0900
Subject: [PATCH 065/106] refactor table view to use new components

---
 .../components/Blocks/views/Table/index.tsx   | 90 ++++---------------
 1 file changed, 18 insertions(+), 72 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
index 91b11f84fd..f965007462 100644
--- a/src/cloud/components/Blocks/views/Table/index.tsx
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -33,6 +33,7 @@ import { BlockDataProps } from '../../data/types'
 import { getPropType } from '../../../../lib/blocks/props'
 import { useBlockTable } from '../../../../lib/hooks/useBlockTable'
 import BlockIcon from '../../BlockIcon'
+import BlockProp from '../../props'
 
 type GithubCellProps = BlockDataProps<TableBlock['children'][number]>
 
@@ -172,13 +173,23 @@ const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
                   </td>
                   {state.columns.map((col) => (
                     <td key={col}>
-                      <TableCell
-                        column={col}
-                        row={child}
-                        data={state.rowData.get(child.id) || {}}
-                        updateCell={tableActions.setCell}
-                        updateBlock={updateIssueBlock}
-                      />
+                      {isDataPropCol(col) ? (
+                        <GithubCell
+                          prop={getDataPropColProp(col)}
+                          data={child.data}
+                          onUpdate={(data) =>
+                            updateIssueBlock({ ...child, data })
+                          }
+                        />
+                      ) : (
+                        <BlockProp
+                          type={getPropType(col)}
+                          value={(state.rowData.get(child.id) || {})[col] || ''}
+                          onChange={(val) =>
+                            tableActions.setCell(child.id, col, val)
+                          }
+                        />
+                      )}
                     </td>
                   ))}
                 </tr>
@@ -196,71 +207,6 @@ const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
   )
 }
 
-interface TableCellProps {
-  column: Column
-  row: TableBlock['children'][number]
-  data: Record<string, string>
-  updateCell: (
-    rowId: string,
-    column: Column,
-    value: string
-  ) => Promise<void> | void
-  updateBlock: (block: Block) => Promise<void>
-}
-
-const TableCell = ({
-  column,
-  row,
-  data,
-  updateCell,
-  updateBlock,
-}: TableCellProps) => {
-  const update = useCallback(
-    (value: string) => {
-      updateCell(row.id, column, value)
-    },
-    [column, row, updateCell]
-  )
-
-  if (isDataPropCol(column)) {
-    return (
-      <GithubCell
-        prop={getDataPropColProp(column)}
-        data={row.data}
-        onUpdate={(data) => updateBlock({ ...row, data })}
-      />
-    )
-  }
-
-  switch (getPropType(column)) {
-    case 'number':
-      return (
-        <TextProp
-          value={data[column] || ''}
-          onUpdate={update}
-          validation={isNumberString}
-        />
-      )
-    case 'date':
-      return <DateProp value={data[column] || ''} onUpdate={update} />
-    case 'url':
-      return (
-        <TextProp
-          value={data[column] || ''}
-          onUpdate={update}
-          validation={isUrlOrPath}
-        />
-      )
-    case 'checkbox':
-      return <CheckboxProp value={data[column] || ''} onUpdate={update} />
-    case 'user':
-      return <BoostUserProp value={data[column] || ''} onUpdate={update} />
-    case 'text':
-    default:
-      return <TextProp value={data[column] || ''} onUpdate={update} />
-  }
-}
-
 const GithubCell = ({
   prop,
   data,

From 154d3d40e2ff62f923eda5d3b76daf6b0a968525 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Mon, 6 Sep 2021 00:10:22 +0900
Subject: [PATCH 066/106] initial

---
 src/cloud/api/blocks/index.ts                 |  20 +-
 src/cloud/components/Blocks/BlockContent.tsx  | 381 ++++++++++++------
 src/cloud/components/Blocks/BlockCreate.tsx   | 135 -------
 .../components/Blocks/BlockCreationModal.tsx  |  90 +++++
 src/cloud/components/Blocks/BlockEditor.tsx   |  62 ++-
 src/cloud/components/Blocks/BlockLayout.tsx   | 120 ++++++
 src/cloud/components/Blocks/BlockToolbar.tsx  |  30 ++
 src/cloud/components/Blocks/BlockTree.tsx     | 170 ++++----
 .../Blocks/data/GithubAssigneesData.tsx       |  57 +--
 .../Blocks/data/GithubLabelsData.tsx          |  70 ++--
 .../Blocks/data/GithubStatusData.tsx          |   3 +-
 .../components/Blocks/forms/ContainerForm.tsx |  60 ---
 .../components/Blocks/forms/EmbedForm.tsx     | 102 +++--
 .../Blocks/forms/GithubIssueForm.tsx          | 136 ++++---
 .../components/Blocks/forms/MarkdownForm.tsx  |  60 ---
 .../components/Blocks/forms/TableForm.tsx     |  60 ---
 .../components/Blocks/props/BoostUserProp.tsx | 116 ++++--
 .../components/Blocks/props/CheckboxProp.tsx  |   6 +-
 .../components/Blocks/props/DataTypeMenu.tsx  |  11 +-
 .../components/Blocks/props/DateProp.tsx      |  54 ++-
 .../components/Blocks/props/HyperlinkProp.tsx |  10 +-
 .../components/Blocks/props/TextProp.tsx      | 214 ++++++++--
 src/cloud/components/Blocks/props/index.tsx   |  69 +++-
 src/cloud/components/Blocks/props/types.ts    |   1 +
 .../components/Blocks/views/Container.tsx     | 120 +++++-
 src/cloud/components/Blocks/views/Embed.tsx   |  35 +-
 .../components/Blocks/views/GithubIssue.tsx   | 249 +++++++-----
 .../components/Blocks/views/Markdown.tsx      |  93 +++--
 .../Blocks/views/Table/ColumnSettings.tsx     | 110 ++---
 .../Blocks/views/Table/InteractableCell.tsx   |  44 ++
 .../components/Blocks/views/Table/index.tsx   | 373 ++++++++++++-----
 src/cloud/components/Blocks/views/index.tsx   |  21 +
 src/cloud/components/ContentManager/index.tsx |   6 +-
 .../DocPage/DocContextMenuActions.tsx         | 136 ++++---
 src/cloud/components/DocPage/EditorLayout.tsx |   6 +-
 .../components/DocPage/NewDocContextMenu.tsx  |  78 ++--
 src/cloud/components/DocPage/index.tsx        |   6 +-
 .../RevisionsModal/RevisionModalDetail.tsx    |   6 +-
 .../RevisionsModal/RevisionModalNavigator.tsx |   6 +-
 .../Onboarding/OnboardingLayout.tsx           |   6 +-
 src/cloud/lib/blocks/dom.ts                   |   5 +
 src/cloud/lib/blocks/props.ts                 |   1 +
 src/cloud/lib/blocks/table.ts                 |  36 +-
 src/cloud/lib/hooks/useBlockTable.ts          |   4 +-
 src/cloud/lib/hooks/useDocBlocks.ts           |  10 +-
 src/cloud/lib/i18n/fr.ts                      |   1 +
 src/cloud/lib/i18n/ja.ts                      |   1 +
 src/cloud/lib/i18n/zhCN.ts                    |   1 +
 src/cloud/lib/stores/blocks/index.ts          |   6 +-
 .../lib/stores/sidebarCollapse/store.tsx      |   6 +
 src/cloud/lib/stores/sidebarCollapse/types.ts |   3 +-
 src/cloud/lib/utils/blocks.ts                 |  16 +
 src/cloud/lib/utils/string.ts                 |  15 +-
 src/cloud/pages/cooperate.tsx                 |   1 +
 src/design/components/atoms/LeftRightList.tsx |  19 +-
 src/design/components/atoms/Link.tsx          |  22 +-
 src/design/components/atoms/RightLeftList.tsx |  64 +++
 .../{VerticalScroller.tsx => Scroller.tsx}    |  25 +-
 .../molecules/FilterableSelectList.tsx        |  62 ---
 .../molecules/Form/atoms/FormCheckbox.tsx     |  11 +-
 .../molecules/Form/atoms/FormTextArea.tsx     |   4 +
 .../molecules/Navigation/NavigationItem.tsx   |   2 +-
 .../molecules/SearchableOptionList.tsx        |  38 +-
 .../Dialog/molecules/MessageBoxDialogBody.tsx |   2 +-
 .../organisms/FuzzyNavigation/index.tsx       |   6 +-
 .../components/organisms/InfoBlock/index.tsx  | 143 +++++++
 .../components/organisms/Modal/index.tsx      |  10 +-
 .../organisms/SearchLayout/index.tsx          |   6 +-
 .../components/organisms/Sidebar/index.tsx    |   6 +-
 .../components/organisms/Table/index.tsx      | 189 +++++++++
 .../components/organisms/Toolbar/index.tsx    |  82 ++++
 .../components/templates/ContentLayout.tsx    |   3 +
 src/design/lib/keyboard.ts                    |   4 +-
 src/design/lib/stores/integrations/index.ts   |   2 +-
 74 files changed, 2794 insertions(+), 1344 deletions(-)
 delete mode 100644 src/cloud/components/Blocks/BlockCreate.tsx
 create mode 100644 src/cloud/components/Blocks/BlockCreationModal.tsx
 create mode 100644 src/cloud/components/Blocks/BlockLayout.tsx
 create mode 100644 src/cloud/components/Blocks/BlockToolbar.tsx
 delete mode 100644 src/cloud/components/Blocks/forms/ContainerForm.tsx
 delete mode 100644 src/cloud/components/Blocks/forms/MarkdownForm.tsx
 delete mode 100644 src/cloud/components/Blocks/forms/TableForm.tsx
 create mode 100644 src/cloud/components/Blocks/views/Table/InteractableCell.tsx
 create mode 100644 src/cloud/lib/blocks/dom.ts
 create mode 100644 src/cloud/lib/utils/blocks.ts
 create mode 100644 src/design/components/atoms/RightLeftList.tsx
 rename src/design/components/atoms/{VerticalScroller.tsx => Scroller.tsx} (60%)
 delete mode 100644 src/design/components/molecules/FilterableSelectList.tsx
 create mode 100644 src/design/components/organisms/InfoBlock/index.tsx
 create mode 100644 src/design/components/organisms/Table/index.tsx
 create mode 100644 src/design/components/organisms/Toolbar/index.tsx

diff --git a/src/cloud/api/blocks/index.ts b/src/cloud/api/blocks/index.ts
index ec0e985015..c8c4bca03c 100644
--- a/src/cloud/api/blocks/index.ts
+++ b/src/cloud/api/blocks/index.ts
@@ -1,7 +1,14 @@
 import { callApi } from '../../lib/client'
 
+type BlockTypeLabel =
+  | 'markdown'
+  | 'embed'
+  | 'github.issue'
+  | 'table'
+  | 'container'
+
 interface BlockType<
-  T extends string,
+  T extends BlockTypeLabel,
   D,
   C extends BlockType<any, any, any> = never
 > {
@@ -10,6 +17,7 @@ interface BlockType<
   name: string
   children: C[]
   data: D
+  createdAt: string
 }
 
 export type MarkdownBlock = BlockType<'markdown', null>
@@ -45,8 +53,9 @@ export async function getBlockTree(rootBlock: string): Promise<Block> {
   return block
 }
 
+export type BlockCreateRequestBody = Omit<Block, 'id' | 'createdAt'>
 export async function createBlock(
-  body: Omit<Block, 'id'>,
+  body: BlockCreateRequestBody,
   parent: string
 ): Promise<Block> {
   const { block } = await callApi(`api/blocks`, {
@@ -57,7 +66,12 @@ export async function createBlock(
   return block
 }
 
-export async function updateBlock(body: Block): Promise<Block> {
+export type BlockUpdateRequestBody = { id: string; type: string } & Partial<
+  Block
+>
+export async function updateBlock(
+  body: BlockUpdateRequestBody
+): Promise<Block> {
   const { block } = await callApi(`api/blocks/${body.id}`, {
     method: 'put',
     json: body,
diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index 2ba910034b..c416b76fb2 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -1,36 +1,42 @@
-import React, { useCallback, useState, useMemo, useEffect } from 'react'
+import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react'
 import {
   mdiPlus,
-  mdiChevronDown,
   mdiPackageVariantClosed,
   mdiCodeTags,
-  mdiTable,
   mdiFileDocumentOutline,
-  mdiChevronLeft,
 } from '@mdi/js'
-import MarkdownForm from './forms/MarkdownForm'
 import EmbedForm from './forms/EmbedForm'
-import TableForm from './forms/TableForm'
-import { Block, ContainerBlock } from '../../api/blocks'
+import { Block, BlockCreateRequestBody, ContainerBlock } from '../../api/blocks'
 import { useDocBlocks } from '../../lib/hooks/useDocBlocks'
 import { SerializedDocWithBookmark } from '../../interfaces/db/doc'
 import { useModal } from '../../../design/lib/stores/modal'
-import { useI18n } from '../../lib/hooks/useI18n'
-import { lngKeys } from '../../lib/i18n/types'
-import ContainerForm from './forms/ContainerForm'
 import BlockTree from './BlockTree'
 import Icon from '../../../design/components/atoms/Icon'
 import styled from '../../../design/lib/styled'
 import { find } from '../../../design/lib/utils/tree'
 import useRealtime from '../../lib/editor/hooks/useRealtime'
 import { BlockView } from './views'
+import Scroller from '../../../design/components/atoms/Scroller'
+import UpDownList from '../../../design/components/atoms/UpDownList'
+import NavigationItem from '../../../design/components/molecules/Navigation/NavigationItem'
+import Flexbox from '../../../design/components/atoms/Flexbox'
+import { getBlockDomId } from '../../lib/blocks/dom'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
+import { useToast } from '../../../design/lib/stores/toast'
+import { usePage } from '../../lib/stores/pageStore'
+import { getTableBlockInputId } from './views/Table'
+import {
+  CollapsableType,
+  useSidebarCollapse,
+} from '../../lib/stores/sidebarCollapse'
+import { FoldingProps } from '../../../design/components/atoms/FoldingWrapper'
 
 export interface Canvas extends SerializedDocWithBookmark {
   rootBlock: ContainerBlock
 }
 
-export interface FormProps<T extends Block> {
-  onSubmit: (block: Omit<T, 'id'>) => Promise<any>
+export interface FormProps {
+  onSubmit: (block: BlockCreateRequestBody) => Promise<any>
 }
 
 interface BlockContentProps {
@@ -38,22 +44,59 @@ interface BlockContentProps {
 }
 
 const BlockContent = ({ doc }: BlockContentProps) => {
+  const { currentUserIsCoreMember } = usePage()
   const { state, actions } = useDocBlocks(doc.rootBlock.id)
   const { openModal, closeAllModals } = useModal()
-  const { translate } = useI18n()
   const [currentBlock, setCurrentBlock] = useState<Block | null>(null)
-  const [showActions, setShowActions] = useState(true)
   const [provider] = useRealtime({
     token: doc.collaborationToken || '',
     id: doc.id,
   })
+  const { pushApiErrorMessage } = useToast()
+  const contentScrollerRef = useRef<OverlayScrollbarsComponent>(null)
+
+  const scrollToElement = useCallback((elem: HTMLElement | null) => {
+    if (elem != null && contentScrollerRef.current != null) {
+      const instance = contentScrollerRef.current.osInstance()
+      if (instance != null) {
+        instance.scroll({ el: elem, block: 'center' }, 300)
+      }
+    }
+  }, [])
 
   const createBlock = useCallback(
-    async (block: Omit<Block, 'id'>) => {
-      await actions.create(block, doc.rootBlock)
-      closeAllModals()
+    async (block: BlockCreateRequestBody) => {
+      try {
+        const newBlock = await actions.create(block, doc.rootBlock)
+        closeAllModals()
+        if (
+          (currentBlock != null && currentBlock.type !== 'container') ||
+          (currentBlock != null && doc.rootBlock.id !== currentBlock.id)
+        ) {
+          setCurrentBlock(newBlock)
+        } else {
+          const blockElem = document.getElementById(getBlockDomId(newBlock))
+          scrollToElement(blockElem)
+        }
+
+        if (newBlock.type === 'table') {
+          const titleElement = document.getElementById(
+            getTableBlockInputId(newBlock)
+          )
+          if (titleElement != null) titleElement.focus()
+        }
+      } catch (error) {
+        pushApiErrorMessage(error)
+      }
     },
-    [doc, actions, closeAllModals]
+    [
+      doc,
+      actions,
+      closeAllModals,
+      currentBlock,
+      scrollToElement,
+      pushApiErrorMessage,
+    ]
   )
 
   useEffect(() => {
@@ -66,28 +109,71 @@ const BlockContent = ({ doc }: BlockContentProps) => {
     }
   }, [state])
 
-  const modalOptions = useMemo(() => {
-    return {
-      showCloseIcon: true,
-      title: translate(lngKeys.ModalsCreateNewDocument),
-    }
-  }, [translate])
+  const createMarkdown = useCallback(() => {
+    return createBlock({
+      name: 'Markdown',
+      type: 'markdown',
+      children: [],
+      data: null,
+    })
+  }, [createBlock])
 
   const createContainer = useCallback(() => {
-    openModal(<ContainerForm onSubmit={createBlock} />, modalOptions)
-  }, [createBlock, openModal, modalOptions])
-
-  const createMarkdown = useCallback(() => {
-    openModal(<MarkdownForm onSubmit={createBlock} />, modalOptions)
-  }, [createBlock, openModal, modalOptions])
+    return createBlock({
+      name: '',
+      type: 'container',
+      children: [],
+      data: null,
+    })
+  }, [createBlock])
 
   const createTable = useCallback(() => {
-    openModal(<TableForm onSubmit={createBlock} />, modalOptions)
-  }, [createBlock, openModal, modalOptions])
+    return createBlock({
+      name: '',
+      type: 'table',
+      children: [],
+      data: { columns: {} },
+    })
+  }, [createBlock])
 
   const createEmbed = useCallback(() => {
-    openModal(<EmbedForm onSubmit={createBlock} />, modalOptions)
-  }, [createBlock, openModal, modalOptions])
+    openModal(<EmbedForm onSubmit={createBlock} />)
+  }, [createBlock, openModal])
+
+  const {
+    sideBarOpenedBlocksIdsSet,
+    sideBarOpenedLinksIdsSet,
+    toggleItem,
+    unfoldItem,
+    foldItem,
+  } = useSidebarCollapse()
+
+  const getFoldEvents = useCallback(
+    (type: CollapsableType, key: string, reversed?: boolean) => {
+      if (reversed) {
+        return {
+          fold: () => unfoldItem(type, key),
+          unfold: () => foldItem(type, key),
+          toggle: () => toggleItem(type, key),
+        }
+      }
+
+      return {
+        fold: () => foldItem(type, key),
+        unfold: () => unfoldItem(type, key),
+        toggle: () => toggleItem(type, key),
+      }
+    },
+    [toggleItem, unfoldItem, foldItem]
+  )
+
+  const navTree = useMemo(() => {
+    if (state.type === 'loading') {
+      return null
+    }
+
+    return getFoldedChild(state.block, sideBarOpenedBlocksIdsSet, getFoldEvents)
+  }, [getFoldEvents, state, sideBarOpenedBlocksIdsSet])
 
   if (state.type === 'loading') {
     return <div>loading</div>
@@ -95,60 +181,104 @@ const BlockContent = ({ doc }: BlockContentProps) => {
 
   return (
     <StyledBlockContent>
-      <div className='block__editor__nav'>
-        <BlockTree
-          root={state.block}
-          active={currentBlock || doc.rootBlock}
-          onSelect={setCurrentBlock}
-          onDelete={actions.remove}
-        />
+      <div id='block__editor__anchor' />
+      <UpDownList ignoreFocus={true} className='block__editor__nav'>
+        <Scroller className='block__editor__nav__scroller'>
+          <BlockTree
+            root={navTree != null ? navTree : state.block}
+            active={currentBlock || doc.rootBlock}
+            onSelect={setCurrentBlock}
+            onDelete={actions.remove}
+            idPrefix='nav'
+          />
+        </Scroller>
         <div className='block__editor__nav--actions'>
-          <div
+          <NavigationItem
+            labelClick={
+              getFoldEvents('links', 'block__editor-actions', true).toggle
+            }
             className='block__editor__nav--item'
-            onClick={() => setShowActions((state) => !state)}
-          >
-            <span>New Items</span>
-            <Icon
-              path={showActions ? mdiChevronDown : mdiChevronLeft}
-              size={16}
-            />
-          </div>
-          {showActions && (
-            <ul>
-              <li
-                onClick={createContainer}
+            id='block__editor__nav--new-items'
+            folded={!sideBarOpenedLinksIdsSet.has('block__editor-actions')}
+            folding={getFoldEvents('links', 'block__editor-actions', true)}
+            depth={0}
+            label='New Blocks'
+          />
+          {sideBarOpenedLinksIdsSet.has('block__editor-actions') && (
+            <>
+              <NavigationItem
+                labelClick={createContainer}
                 className='block__editor__nav--item'
-              >
-                <Icon path={mdiPackageVariantClosed} size={16} />
-                <span>Container</span>
-                <Icon path={mdiPlus} size={16} />
-              </li>
-              <li onClick={createMarkdown} className='block__editor__nav--item'>
-                <Icon path={mdiFileDocumentOutline} size={16} />
-                <span>Markdown</span>
-                <Icon path={mdiPlus} size={16} />
-              </li>
-              <li onClick={createTable} className='block__editor__nav--item'>
-                <Icon path={mdiTable} size={16} />
-                <span>Table</span>
-                <Icon path={mdiPlus} size={16} />
-              </li>
-              <li onClick={createEmbed} className='block__editor__nav--item'>
-                <Icon path={mdiCodeTags} size={16} />
-                <span>Embed</span>
-                <Icon path={mdiPlus} size={16} />
-              </li>
-            </ul>
+                id='block__editor__nav--container'
+                depth={1}
+                label={
+                  <Flexbox alignItems='center' justifyContent='space-between'>
+                    <span>Container</span>
+                    <Icon path={mdiPlus} size={16} />
+                  </Flexbox>
+                }
+                icon={{ type: 'icon', path: mdiPackageVariantClosed }}
+              />
+              <NavigationItem
+                labelClick={createMarkdown}
+                className='block__editor__nav--item'
+                id='block__editor__nav--markdown'
+                depth={1}
+                label={
+                  <Flexbox alignItems='center' justifyContent='space-between'>
+                    <span>Markdown</span>
+                    <Icon path={mdiPlus} size={16} />
+                  </Flexbox>
+                }
+                icon={{ type: 'icon', path: mdiFileDocumentOutline }}
+              />
+              <NavigationItem
+                labelClick={createTable}
+                className='block__editor__nav--item'
+                id='block__editor__nav--table'
+                depth={1}
+                label={
+                  <Flexbox alignItems='center' justifyContent='space-between'>
+                    <span>Table</span>
+                    <Icon path={mdiPlus} size={16} />
+                  </Flexbox>
+                }
+                icon={{ type: 'icon', path: mdiPackageVariantClosed }}
+              />
+              <NavigationItem
+                labelClick={createEmbed}
+                className='block__editor__nav--item'
+                id='block__editor__nav--embed'
+                depth={1}
+                label={
+                  <Flexbox alignItems='center' justifyContent='space-between'>
+                    <span>Embed</span>
+                    <Icon path={mdiPlus} size={16} />
+                  </Flexbox>
+                }
+                icon={{ type: 'icon', path: mdiCodeTags }}
+              />
+            </>
           )}
         </div>
-      </div>
+      </UpDownList>
       <div className='block__editor__view'>
-        <BlockView
-          block={currentBlock || state.block}
-          actions={actions}
-          canvas={doc}
-          realtime={provider}
-        />
+        <Scroller
+          className='block__editor__view__wrapper'
+          id='block__editor__view__wrapper'
+          ref={contentScrollerRef}
+        >
+          <BlockView
+            block={currentBlock || state.block}
+            actions={actions}
+            canvas={doc}
+            realtime={provider}
+            setCurrentBlock={setCurrentBlock}
+            scrollToElement={scrollToElement}
+            currentUserIsCoreMember={currentUserIsCoreMember}
+          />
+        </Scroller>
+        <div id='block__editor__view__toolbar-portal' />
       </div>
     </StyledBlockContent>
   )
@@ -156,71 +286,60 @@ const BlockContent = ({ doc }: BlockContentProps) => {
 
 const StyledBlockContent = styled.div`
   display: flex;
-  height: 100%;
+  flex: 1 1 auto;
+  overflow: hidden;
 
   & > .block__editor__nav {
     padding-top: ${({ theme }) => theme.sizes.spaces.df}px;
     display: flex;
     flex-direction: column;
-    border: 1px solid ${({ theme }) => theme.colors.border.main};
+    border-right: 1px solid ${({ theme }) => theme.colors.border.main};
     width: 240px;
     flex: 0 0 auto;
 
-    & > div:first-child {
+    .block__editor__nav__scroller {
       flex-grow: 1;
     }
-
-    & .block__editor__nav--item {
-      display: flex;
-      width: 100%;
-      height: 26px;
-      white-space: nowrap;
-      font-size: ${({ theme }) => theme.sizes.fonts.df}px;
-      cursor: pointer;
-      padding: 0 ${({ theme }) => theme.sizes.spaces.df}px;
-
-      align-items: center;
-      flex: 1 1 auto;
-      background: none;
-      outline: 0;
-      border: 0;
-      text-align: left;
-      color: ${({ theme }) => theme.colors.text.secondary};
-      text-decoration: none;
-      margin: 0;
-      overflow: hidden;
-      svg {
-        color: ${({ theme }) => theme.colors.text.subtle};
-      }
-      span {
-        flex: 1 0 auto;
-      }
-
-      &:hover {
-        background-color: ${({ theme }) => theme.colors.background.secondary};
-      }
-    }
-  }
-
-  & .block__editor__nav--actions {
-    & > ul {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      & > li {
-        & span {
-          margin-left: ${({ theme }) => theme.sizes.spaces.sm}px;
-          flex: 1 0 auto;
-        }
-      }
-    }
   }
 
   & .block__editor__view {
     flex: 1 1 auto;
     height: 100%;
-    overflow: auto;
+    position: relative;
+  }
+
+  & .block__editor__view__wrapper {
+    width: 100%;
+    height: 100%;
+    padding: ${({ theme }) => theme.sizes.spaces.md}px 0;
+    position: relative;
   }
 `
 
+function getFoldedChild(
+  targetBlock: Block,
+  sideBarOpenedBlocksIdsSet: Set<string>,
+  getFoldEvents: (
+    type: CollapsableType,
+    key: string,
+    reversed?: boolean | undefined
+  ) => FoldingProps
+): Block & {
+  folded?: boolean
+  folding?: FoldingProps
+} {
+  if ((targetBlock.children || []).length === 0) {
+    return targetBlock
+  }
+
+  return {
+    ...targetBlock,
+    folded: sideBarOpenedBlocksIdsSet.has(targetBlock.id),
+    folding: getFoldEvents('blocks', targetBlock.id, true),
+    children: targetBlock.children.map((child) =>
+      getFoldedChild(child, sideBarOpenedBlocksIdsSet, getFoldEvents)
+    ),
+  } as any
+}
+
 export default BlockContent
diff --git a/src/cloud/components/Blocks/BlockCreate.tsx b/src/cloud/components/Blocks/BlockCreate.tsx
deleted file mode 100644
index 3e775eb3ce..0000000000
--- a/src/cloud/components/Blocks/BlockCreate.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-import {
-  mdiCodeTags,
-  mdiFileDocumentOutline,
-  mdiPlusBoxOutline,
-  mdiTable,
-} from '@mdi/js'
-import React, { useCallback, useEffect, useRef } from 'react'
-import Icon from '../../../design/components/atoms/Icon'
-import { useModal } from '../../../design/lib/stores/modal'
-import styled from '../../../design/lib/styled'
-import { Block } from '../../api/blocks'
-import { FormProps } from './BlockContent'
-import EmbedForm from './forms/EmbedForm'
-import MarkdownForm from './forms/MarkdownForm'
-import TableForm from './forms/TableForm'
-
-const modalOptions = {
-  showCloseIcon: true,
-  width: 'small' as const,
-  title: 'Create new block',
-}
-
-const BlockCreate = ({ onSubmit }: FormProps<Block>) => {
-  const { openModal, closeAllModals } = useModal()
-
-  const onSubmitRef: React.MutableRefObject<typeof onSubmit> = useRef(
-    async (block) => {
-      await onSubmit(block)
-      closeAllModals()
-    }
-  )
-  useEffect(() => {
-    onSubmitRef.current = async (block) => {
-      await onSubmit(block)
-      closeAllModals()
-    }
-  }, [onSubmit, closeAllModals])
-
-  const createMarkdown = useCallback(() => {
-    openModal(<MarkdownForm onSubmit={callRef(onSubmitRef)} />, modalOptions)
-  }, [openModal])
-
-  const createTable = useCallback(() => {
-    openModal(<TableForm onSubmit={callRef(onSubmitRef)} />, modalOptions)
-  }, [openModal])
-
-  const createEmbed = useCallback(() => {
-    openModal(<EmbedForm onSubmit={callRef(onSubmitRef)} />, modalOptions)
-  }, [openModal])
-
-  return (
-    <BlockCreateContainer>
-      <h3>Select a block</h3>
-      <div>
-        <div onClick={createMarkdown} className='block__view__add__selector'>
-          <Icon size={34} path={mdiFileDocumentOutline} />
-          <span>Markdown</span>
-        </div>
-        <div onClick={createTable} className='block__view__add__selector'>
-          <Icon size={34} path={mdiTable} />
-          <span>Table</span>
-        </div>
-        <div onClick={createEmbed} className='block__view__add__selector'>
-          <Icon size={34} path={mdiCodeTags} />
-          <span>Embed</span>
-        </div>
-      </div>
-    </BlockCreateContainer>
-  )
-}
-
-export const ToggleBlockCreate = ({
-  onSubmit,
-  open,
-  onChange,
-}: FormProps<Block> & {
-  open: boolean
-  onChange: (open: boolean) => void
-}) => {
-  return (
-    <>
-      <ToggleBlockCreateContainer onClick={() => onChange(!open)}>
-        <Icon path={mdiPlusBoxOutline} size={16} />
-        <span>Add Block</span>
-      </ToggleBlockCreateContainer>
-      {open && <BlockCreate onSubmit={onSubmit} />}
-    </>
-  )
-}
-
-const BlockCreateContainer = styled.div`
-  margin: 0 auto;
-  margin-top: ${({ theme }) => theme.sizes.spaces.df}px;
-  border-radius: 2px;
-  background-color: ${({ theme }) => theme.colors.background.secondary};
-  padding: ${({ theme }) => theme.sizes.spaces.df}px 0;
-  width: 60%;
-  & > h3 {
-    text-align: center;
-    margin-top: 0;
-  }
-  & > div {
-    display: flex;
-    justify-content: space-evenly;
-    & .block__view__add__selector {
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      span {
-        margin-top: ${({ theme }) => theme.sizes.spaces.sm}px;
-      }
-    }
-  }
-`
-
-const ToggleBlockCreateContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  cursor: pointer;
-
-  border: 1px solid ${({ theme }) => theme.colors.border.main};
-  padding: ${({ theme }) => theme.sizes.spaces.df}px;
-  & span {
-    margin-left: ${({ theme }) => theme.sizes.spaces.df}px;
-  }
-`
-
-function callRef<T, U>(
-  ref: React.MutableRefObject<(...args: T[]) => U>
-): (...args: T[]) => U {
-  return (...args) => ref.current(...args)
-}
-
-export default BlockCreate
diff --git a/src/cloud/components/Blocks/BlockCreationModal.tsx b/src/cloud/components/Blocks/BlockCreationModal.tsx
new file mode 100644
index 0000000000..835560348a
--- /dev/null
+++ b/src/cloud/components/Blocks/BlockCreationModal.tsx
@@ -0,0 +1,90 @@
+import { mdiCodeTags, mdiFileDocumentOutline, mdiTable } from '@mdi/js'
+import React from 'react'
+import Button from '../../../design/components/atoms/Button'
+import Icon from '../../../design/components/atoms/Icon'
+import LeftToRightList from '../../../design/components/atoms/LeftRightList'
+import styled from '../../../design/lib/styled'
+
+interface BlockCreationModalProps {
+  onMarkdownCreation?: () => void
+  onTableCreation?: () => void
+  onEmbedCreation?: () => void
+}
+
+const BlockCreationModal = ({
+  onMarkdownCreation,
+  onEmbedCreation,
+  onTableCreation,
+}: BlockCreationModalProps) => (
+  <Container>
+    <LeftToRightList className='block__creation__list'>
+      {onMarkdownCreation != null && (
+        <Button
+          variant='transparent'
+          id='block__creation__markdown'
+          onClick={onMarkdownCreation}
+          className='block__view__add__selector'
+        >
+          <Icon size={50} path={mdiFileDocumentOutline} />
+          <span>Markdown</span>
+        </Button>
+      )}
+      {onTableCreation != null && (
+        <Button
+          id='block__creation__table'
+          variant='transparent'
+          onClick={onTableCreation}
+          className='block__view__add__selector'
+        >
+          <Icon size={34} path={mdiTable} />
+          <span>Table</span>
+        </Button>
+      )}
+      {onEmbedCreation != null && (
+        <Button
+          variant='transparent'
+          id='block__creation__embed'
+          onClick={onEmbedCreation}
+          className='block__view__add__selector'
+        >
+          <Icon size={34} path={mdiCodeTags} />
+          <span>Embed</span>
+        </Button>
+      )}
+    </LeftToRightList>
+  </Container>
+)
+
+const Container = styled.div`
+  .block__creation__list {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
+  button {
+    height: auto;
+    max-height: none;
+    padding: ${({ theme }) => theme.sizes.spaces.df}px
+      ${({ theme }) => theme.sizes.spaces.md}px;
+    .button__label {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .icon {
+        margin-bottom: ${({ theme }) => theme.sizes.spaces.sm}px;
+      }
+      span {
+        font-size: ${({ theme }) => theme.sizes.fonts.md}px;
+      }
+    }
+  }
+
+  button + button {
+    margin-left: ${({ theme }) => theme.sizes.spaces.md}px;
+  }
+`
+
+export default BlockCreationModal
diff --git a/src/cloud/components/Blocks/BlockEditor.tsx b/src/cloud/components/Blocks/BlockEditor.tsx
index 6857fced3e..421b287b9a 100644
--- a/src/cloud/components/Blocks/BlockEditor.tsx
+++ b/src/cloud/components/Blocks/BlockEditor.tsx
@@ -1,16 +1,76 @@
+import { mdiDotsHorizontal } from '@mdi/js'
 import React from 'react'
+import { TopbarControlProps } from '../../../design/components/organisms/Topbar'
+import { useModal } from '../../../design/lib/stores/modal'
 import { ContainerBlock } from '../../api/blocks'
 import { SerializedDocWithBookmark } from '../../interfaces/db/doc'
+import { SerializedTeam } from '../../interfaces/db/team'
+import { useI18n } from '../../lib/hooks/useI18n'
+import { lngKeys } from '../../lib/i18n/types'
+import { usePage } from '../../lib/stores/pageStore'
 import ApplicationPage from '../ApplicationPage'
+import ApplicationTopbar from '../ApplicationTopbar'
+import InviteCTAButton from '../buttons/InviteCTAButton'
+import DocShare from '../DocPage/DocShare'
+import NewDocContextMenu from '../DocPage/NewDocContextMenu'
 import BlockContent from './BlockContent'
 
 interface BlockEditorProps {
   doc: SerializedDocWithBookmark & { rootBlock: ContainerBlock }
+  team: SerializedTeam
 }
 
-const BlockEditor = ({ doc }: BlockEditorProps) => {
+const BlockEditor = ({ doc, team }: BlockEditorProps) => {
+  const { translate } = useI18n()
+  const { openContextModal } = useModal()
+  const { currentUserIsCoreMember, permissions = [] } = usePage()
   return (
     <ApplicationPage>
+      <ApplicationTopbar
+        controls={
+          [
+            {
+              type: 'node',
+              element: <InviteCTAButton origin='doc-page' key='invite-cta' />,
+            },
+            {
+              type: 'separator',
+            },
+            {
+              type: 'button',
+              variant: 'secondary',
+              label: translate(lngKeys.Share),
+              onClick: (event) =>
+                openContextModal(
+                  event,
+                  <DocShare currentDoc={doc} team={team} />,
+                  { width: 440, alignment: 'bottom-right' }
+                ),
+            },
+            {
+              variant: 'icon',
+              iconPath: mdiDotsHorizontal,
+              onClick: (event) => {
+                openContextModal(
+                  event,
+                  <NewDocContextMenu
+                    currentDoc={doc}
+                    team={team}
+                    currentUserIsCoreMember={currentUserIsCoreMember}
+                    permissions={permissions || []}
+                    isCanvas={true}
+                  />,
+                  {
+                    alignment: 'bottom-right',
+                    removePadding: true,
+                    hideBackground: true,
+                  }
+                )
+              },
+            },
+          ] as TopbarControlProps[]
+        }
+      />
       <BlockContent doc={doc} />
     </ApplicationPage>
   )
diff --git a/src/cloud/components/Blocks/BlockLayout.tsx b/src/cloud/components/Blocks/BlockLayout.tsx
new file mode 100644
index 0000000000..89e7dd336d
--- /dev/null
+++ b/src/cloud/components/Blocks/BlockLayout.tsx
@@ -0,0 +1,120 @@
+import React, { PropsWithChildren } from 'react'
+import { LoadingButton } from '../../../design/components/atoms/Button'
+import WithTooltip from '../../../design/components/atoms/WithTooltip'
+import styled from '../../../design/lib/styled'
+import { generateId } from '../../../lib/string'
+import cc from 'classcat'
+
+interface BlockLayoutProps {
+  isRootBlock?: boolean
+  controls?: {
+    id?: string
+    disabled?: boolean
+    active?: boolean
+    icon?: React.ReactNode
+    iconPath?: string
+    onClick: (event: React.MouseEvent) => void
+    tooltip?: string
+    spinning?: boolean
+  }[]
+}
+
+const BlockLayout = ({
+  isRootBlock = false,
+  children,
+  controls = [],
+}: PropsWithChildren<BlockLayoutProps>) => (
+  <BlockLayoutContainer
+    className={cc([
+      'block__layout',
+      !isRootBlock ? `block__layout--hover` : 'block__layout--static',
+      controls.length === 0 && `block__layout--empty`,
+    ])}
+  >
+    {controls.length > 0 && (
+      <div className='block__layout__controls'>
+        {controls.map((control) => (
+          <WithTooltip
+            tooltip={control.tooltip}
+            side='bottom'
+            key={generateId()}
+          >
+            <LoadingButton
+              icon={control.icon}
+              iconPath={control.iconPath}
+              disabled={control.disabled}
+              id={control.id}
+              onClick={control.onClick}
+              spinning={control.spinning}
+              active={control.active}
+              variant='icon'
+              size='sm'
+            />
+          </WithTooltip>
+        ))}
+      </div>
+    )}
+    <div className='block__layout__content'>{children}</div>
+  </BlockLayoutContainer>
+)
+
+function hexToRgb(hex: string) {
+  try {
+    return hex
+      .replace(
+        /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+        (_m, r, g, b) => '#' + r + r + g + g + b + b
+      )
+      .substring(1)
+      .match(/.{2}/g)!
+      .map((x) => parseInt(x, 16))
+  } catch (error) {
+    return ''
+  }
+}
+
+const BlockLayoutContainer = styled.div`
+  width: 100%;
+  position: relative;
+  transition: all 0.3s ease-in-out;
+  background: ${({ theme }) => theme.colors.background.primary};
+  padding: ${({ theme }) => theme.sizes.spaces.md}px
+    ${({ theme }) => theme.sizes.spaces.xl}px;
+
+  .block__layout__controls {
+    transition: all 0.3s ease-in-out;
+    position: absolute;
+    right: 5px;
+    top: -13px;
+    border: 1px solid ${({ theme }) => theme.colors.border.main};
+    background: ${({ theme }) => theme.colors.background.primary};
+    border-radius: ${({ theme }) => theme.borders.radius}px;
+
+    button + button {
+      margin: 0;
+    }
+  }
+
+  &.block__layout--hover {
+    .block__layout__controls {
+      display: none;
+    }
+    &:hover {
+      .block__layout__controls {
+        display: block;
+      }
+
+      &:not(.block__layout--empty) {
+        background: ${({ theme }) => {
+          const rgba = hexToRgb(theme.colors.background.secondary)
+          return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, 0.4)`
+        }};
+      }
+    }
+  }
+
+  &.block__layout--static {
+  }
+`
+
+export default BlockLayout
diff --git a/src/cloud/components/Blocks/BlockToolbar.tsx b/src/cloud/components/Blocks/BlockToolbar.tsx
new file mode 100644
index 0000000000..059ebef28a
--- /dev/null
+++ b/src/cloud/components/Blocks/BlockToolbar.tsx
@@ -0,0 +1,30 @@
+import React, { PropsWithChildren } from 'react'
+import Portal from '../../../design/components/atoms/Portal'
+import Toolbar, {
+  ToolbarControlProps,
+} from '../../../design/components/organisms/Toolbar'
+
+const BlockToolbar = ({
+  controls = [],
+  children,
+}: PropsWithChildren<{
+  controls?: ToolbarControlProps[]
+}>) => {
+  const portalContainer = document.getElementById(
+    'block__editor__view__toolbar-portal'
+  )
+
+  if (portalContainer == null) {
+    return null
+  }
+
+  return (
+    <Portal target={portalContainer}>
+      <Toolbar className='block__view__container__add' controls={controls}>
+        {children}
+      </Toolbar>
+    </Portal>
+  )
+}
+
+export default BlockToolbar
diff --git a/src/cloud/components/Blocks/BlockTree.tsx b/src/cloud/components/Blocks/BlockTree.tsx
index ac638fcfd0..630fe5e34f 100644
--- a/src/cloud/components/Blocks/BlockTree.tsx
+++ b/src/cloud/components/Blocks/BlockTree.tsx
@@ -1,56 +1,73 @@
 import React from 'react'
-import { mdiTrashCanOutline } from '@mdi/js'
+import { mdiTrashCan } from '@mdi/js'
 import { Block } from '../../api/blocks'
 import styled from '../../../design/lib/styled'
 import { capitalize } from '../../lib/utils/string'
-import Icon from '../../../design/components/atoms/Icon'
 import BlockIcon from './BlockIcon'
+import NavigationItem from '../../../design/components/molecules/Navigation/NavigationItem'
+import { min } from 'ramda'
+import cc from 'classcat'
+import { FoldingProps } from '../../../design/components/atoms/FoldingWrapper'
 
 interface BlockTreeProps {
-  root: Block
+  idPrefix?: string
+  root: Block & { folding?: FoldingProps; folded?: boolean }
   onSelect: (block: Block) => void
-  onDelete: (block: Block) => void
+  onDelete?: (block: Block) => void
   active?: Block
   depth?: number
+  className?: string
 }
 
 const BlockTree = ({
+  idPrefix,
   root,
   onSelect,
   onDelete,
   depth,
   active,
+  className,
 }: BlockTreeProps) => {
+  const parentDepth = min(depth || 1, 6)
   return (
     <StyledBlockTree
-      className={active && active.id === root.id && 'block__tree--active'}
-      key={root.id}
-      depth={depth || 0}
+      className={cc([
+        'block__tree',
+        root.children.length > 0 && 'block__editor__nav--tree',
+        parentDepth === 1 && `block__editor__nav--tree-root`,
+        className,
+      ])}
+      depth={parentDepth}
     >
-      <div className='block__tree__label'>
-        <BlockIcon block={root} size={16} />
-        <span onClick={() => onSelect(root)}>{blockTitle(root)}</span>
-        <span onClick={() => onDelete(root)}>
-          <Icon
-            className='block__tree__action'
-            path={mdiTrashCanOutline}
-            size={16}
+      <NavigationItem
+        className='block__editor__nav--item'
+        folded={root.folded}
+        folding={root.folding}
+        id={`${idPrefix}-block-${root.id}`}
+        label={blockTitle(root)}
+        active={active && root.id === active.id}
+        depth={parentDepth}
+        icon={{ type: 'node', icon: <BlockIcon block={root} size={16} /> }}
+        labelClick={() => onSelect(root)}
+        controls={
+          onDelete == null || depth === 0
+            ? []
+            : [{ icon: mdiTrashCan, onClick: () => onDelete(root) }]
+        }
+      />
+      {!root.folded &&
+        root.children.length > 0 &&
+        (root.children as Block[]).map((child: Block) => (
+          <BlockTree
+            idPrefix={idPrefix}
+            key={child.id}
+            root={child}
+            onSelect={onSelect}
+            onDelete={onDelete}
+            active={active}
+            depth={parentDepth + 1}
           />
-        </span>
-      </div>
-      <div className='block__tree__children'>
-        {root.children.length > 0 &&
-          (root.children as Block[]).map((child: Block) => (
-            <BlockTree
-              key={child.id}
-              root={child}
-              onSelect={onSelect}
-              onDelete={onDelete}
-              active={active}
-              depth={(depth || 0) + 1}
-            />
-          ))}
-      </div>
+        ))}
     </StyledBlockTree>
   )
 }
@@ -58,83 +75,50 @@ const BlockTree = ({
 function blockTitle(block: Block) {
   switch (block.type) {
     case 'github.issue':
-      return block.data.number != null
-        ? `#${block.data.number}`
-        : 'Github Issue'
+      try {
+        return `${block.data.title}`
+      } catch (err) {
+        return 'Github Issue'
+      }
+    case 'embed':
+    case 'table':
+      return block.name.trim() === '' ? capitalize(block.type) : block.name
     default:
       return capitalize(block.type)
   }
 }
 
 const StyledBlockTree = styled.div<{ depth: number }>`
-  font-size: ${({ theme }) => theme.sizes.fonts.df}px;
   position: relative;
+  width: 100%;
 
-  &.block__tree--active > .block__tree__label {
-    background-color: ${({ theme }) => theme.colors.background.secondary};
-  }
-
-  & > .block__tree__label {
-    position: relative;
-    padding-left: ${({ depth }) => 18 + (depth as number) * 15}px;
-    display: flex;
-    width: 100%;
-    height: 26px;
-    white-space: nowrap;
-    font-size: ${({ theme }) => theme.sizes.fonts.df}px;
-    cursor: pointer;
-
-    align-items: center;
-    flex: 1 1 auto;
-    background: none;
-    outline: 0;
-    border: 0;
-    text-align: left;
-    color: ${({ theme }) => theme.colors.text.secondary};
-    text-decoration: none;
-    margin: 0;
-    overflow: hidden;
-
-    & > span:first-of-type {
-      flex-grow: 1;
-    }
-
-    & svg {
-      color: ${({ theme }) => theme.colors.text.subtle};
-      margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
-    }
-
-    & .block__tree__action {
-      display: none;
-    }
-
-    &:hover {
-      background-color: ${({ theme }) => theme.colors.background.secondary};
-
-      & .block__tree__action {
-        display: block;
-      }
-    }
-
-    &:before {
+  &.block__editor__nav--tree {
+    &::before {
       content: '';
       position: absolute;
-      width: 8px;
-      top: 0;
-      left: ${({ depth }) => 5 + (depth as number) * 15}px;
-      border-bottom: 1px solid ${({ theme }) => theme.colors.border.second};
-      height: 50%;
+      width: 1px;
+      bottom: 13px;
+      left: ${({ depth }) => (depth as number) * 8 + 4}px;
+      background: ${({ theme }) => theme.colors.border.second};
+      height: calc(100% - 26px);
+      z-index: 1;
+      pointer-events: none;
+      filter: brightness(120%);
     }
   }
-  & > .block__tree__children {
-    position: relative;
-    &:before {
+
+  .block__editor__nav--item:first-of-type {
+    &::before {
       content: '';
       position: absolute;
-      border-left: 1px solid ${({ theme }) => theme.colors.border.second};
-      top: 0;
-      left: ${({ depth }) => 5 + (depth as number) * 15}px;
-      height: calc(100% - 13px);
+      width: 8px;
+      height: 1px;
+      background: ${({ theme }) => theme.colors.border.second};
+      top: 13px;
+      left: ${({ depth }) => (depth as number) * 8 - 4}px;
+      z-index: 1;
+      pointer-events: none;
+      filter: brightness(120%);
     }
   }
 `
diff --git a/src/cloud/components/Blocks/data/GithubAssigneesData.tsx b/src/cloud/components/Blocks/data/GithubAssigneesData.tsx
index 3de60ad62e..b5e4fe0d1b 100644
--- a/src/cloud/components/Blocks/data/GithubAssigneesData.tsx
+++ b/src/cloud/components/Blocks/data/GithubAssigneesData.tsx
@@ -3,11 +3,12 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useModal } from '../../../../design/lib/stores/modal'
 import { getAction, postAction } from '../../../api/integrations'
 import styled from '../../../../design/lib/styled'
-import FilterableSelectList from '../../../../design/components/molecules/FilterableSelectList'
 import Spinner from '../../../../design/components/atoms/Spinner'
 import { useToast } from '../../../../design/lib/stores/toast'
 import { BlockDataProps } from './types'
 import { GithubIssueBlock } from '../../../api/blocks'
+import SearchableOptionListPopup from '../../SearchableOptionListPopup'
+import Flexbox from '../../../../design/components/atoms/Flexbox'
 
 interface Assignee {
   id: number
@@ -38,33 +39,35 @@ const GitHubAssigneesData = ({
         pushApiErrorMessage(error)
       }
     },
-    [data]
+    [data, closeAllModals, onUpdate, pushApiErrorMessage]
   )
 
   const openAssigneeSelect: React.MouseEventHandler = useCallback(
     (ev) => {
+      //TOFIX PREVENT GITHUB UPDATE FOR NOW
+      return
       openContextModal(
         ev,
         <AssigneeSelect data={data} onSelect={addAssignees} />
       )
     },
-    [openContextModal, data]
+    [openContextModal, addAssignees, data]
   )
 
   return (
     <Container onClick={openAssigneeSelect}>
-      {data.assignees?.map((user: Assignee) => (
-        <StyledUserIcon className='subtle'>
-          <img src={user.avatar_url} alt={user.login[0]} />
-        </StyledUserIcon>
-      ))}
+      <Flexbox alignItems='center'>
+        {data.assignees?.map((user: Assignee) => (
+          <StyledUserIcon className='subtle' key={user.id}>
+            <img src={user.avatar_url} alt={user.login[0]} />
+          </StyledUserIcon>
+        ))}
+      </Flexbox>
     </Container>
   )
 }
 
-const Container = styled.div`
-  min-height: 40px;
-`
+const Container = styled.div``
 
 interface AssigneeSelectProps {
   data: GithubIssueBlock['data']
@@ -74,6 +77,7 @@ interface AssigneeSelectProps {
 const AssigneeSelect = ({ data, onSelect }: AssigneeSelectProps) => {
   const [users, setUsers] = useState<Assignee[] | null>(null)
   const { pushApiErrorMessage } = useToast()
+  const [filter, setFilter] = useState('')
 
   const pushErrorRef = useRef(pushApiErrorMessage)
   useEffect(() => {
@@ -115,20 +119,23 @@ const AssigneeSelect = ({ data, onSelect }: AssigneeSelectProps) => {
 
   return (
     <GithubUserSelectContainer>
-      <h3>Person</h3>
-      <FilterableSelectList
-        items={users.map((user) => [
-          user.login,
-          <div
-            className='user__select__item'
-            onClick={() => onSelect([user.login])}
-          >
-            <StyledUserIcon className='subtle'>
-              <img src={user.avatar_url} alt={user.login[0]} />
-            </StyledUserIcon>
-            {user.login}
-          </div>,
-        ])}
+      <SearchableOptionListPopup
+        query={filter}
+        setQuery={setFilter}
+        title='Person'
+        options={users.map((user) => {
+          return {
+            id: `person-${user.id}`,
+            icon: (
+              <StyledUserIcon className='subtle' style={{ marginRight: 4 }}>
+                <img src={user.avatar_url} alt={user.login[0]} />
+              </StyledUserIcon>
+            ),
+            label: user.login,
+            checked: false,
+            onClick: () => onSelect([user.login]),
+          }
+        })}
       />
     </GithubUserSelectContainer>
   )
diff --git a/src/cloud/components/Blocks/data/GithubLabelsData.tsx b/src/cloud/components/Blocks/data/GithubLabelsData.tsx
index 06efcab1f8..a1683a5c38 100644
--- a/src/cloud/components/Blocks/data/GithubLabelsData.tsx
+++ b/src/cloud/components/Blocks/data/GithubLabelsData.tsx
@@ -1,12 +1,13 @@
 import styled from '../../../../design/lib/styled'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useModal } from '../../../../design/lib/stores/modal'
 import { getAction, postAction } from '../../../api/integrations'
-import FilterableSelectList from '../../../../design/components/molecules/FilterableSelectList'
 import Spinner from '../../../../design/components/atoms/Spinner'
 import { useToast } from '../../../../design/lib/stores/toast'
 import { BlockDataProps } from './types'
 import { GithubIssueBlock } from '../../../api/blocks'
+import SearchableOptionListPopup from '../../SearchableOptionListPopup'
+import Flexbox from '../../../../design/components/atoms/Flexbox'
 
 interface Label {
   name: string
@@ -40,24 +41,28 @@ const GithubLabelsData = ({
         pushApiErrorMessage(error)
       }
     },
-    [data]
+    [data, closeAllModals, onUpdate, pushApiErrorMessage]
   )
 
   const openSetLabelSelect: React.MouseEventHandler = useCallback(
     (ev) => {
+      //TOFIX PREVENT GITHUB UPDATE FOR NOW
+      return
       openContextModal(
         ev,
         <GithubLabelsSelect data={data} onUpdate={addLabel} />
       )
     },
-    [data, addLabel]
+    [data, addLabel, openContextModal]
   )
 
   return (
     <StyledGithubLabels onClick={openSetLabelSelect}>
       <ul>
         {data.labels.map((label: Label) => (
-          <li style={{ backgroundColor: `#${label.color}` }}>{label.name}</li>
+          <li style={{ backgroundColor: `#${label.color}` }} key={label.name}>
+            {label.name}
+          </li>
         ))}
       </ul>
     </StyledGithubLabels>
@@ -65,8 +70,6 @@ const GithubLabelsData = ({
 }
 
 const StyledGithubLabels = styled.div`
-  cursor: pointer;
-  min-height: 40px;
   & > ul {
     margin: 0;
     padding: 0;
@@ -77,6 +80,8 @@ const StyledGithubLabels = styled.div`
       padding: ${({ theme }) => theme.sizes.spaces.xsm}px;
       border-radius: 5px;
       font-size: ${({ theme }) => theme.sizes.fonts.sm}px;
+      text-shadow: 0 0 3px #000;
+      white-space: nowrap;
     }
   }
 `
@@ -89,6 +94,7 @@ interface LabelSelectProps {
 const GithubLabelsSelect = ({ data, onUpdate }: LabelSelectProps) => {
   const [labels, setLabels] = useState<Label[] | null>(null)
   const { pushApiErrorMessage } = useToast()
+  const [query, setQuery] = useState<string>('')
 
   const pushErrorRef = useRef(pushApiErrorMessage)
   useEffect(() => {
@@ -124,36 +130,38 @@ const GithubLabelsSelect = ({ data, onUpdate }: LabelSelectProps) => {
     }
   }, [data])
 
+  const filteredLabels = useMemo(() => {
+    if (labels == null) {
+      return []
+    }
+    const matches = labels.filter(
+      (label) => label.name.includes(query) || label.description.includes(query)
+    )
+    return matches.map((label) => {
+      return {
+        label: (
+          <Flexbox direction='column'>
+            <h4 style={{ margin: '6px 0px' }}>{label.name}</h4>
+            <div>{label.description || 'No description'}</div>
+          </Flexbox>
+        ),
+        onClick: () => onUpdate([label]),
+      }
+    })
+  }, [labels, onUpdate, query])
+
   if (labels == null) {
     return <Spinner />
   }
 
   return (
-    <LabelSelectContainer>
-      <h3>Person</h3>
-      <FilterableSelectList
-        items={labels.map((label) => [
-          label.name,
-          <div
-            className='label__select__item'
-            onClick={() => onUpdate([label])}
-          >
-            <h4>{label.name}</h4>
-            <div>{label.description || 'No description'}</div>
-          </div>,
-        ])}
-      />
-    </LabelSelectContainer>
+    <SearchableOptionListPopup
+      query={query}
+      setQuery={setQuery}
+      title='Labels'
+      options={filteredLabels}
+    />
   )
 }
 
-const LabelSelectContainer = styled.div`
-  & h4 {
-    margin: ${({ theme }) => theme.sizes.spaces.xsm}px 0;
-  }
-
-  & .label__select__item {
-    cursor: pointer;
-  }
-`
 export default GithubLabelsData
diff --git a/src/cloud/components/Blocks/data/GithubStatusData.tsx b/src/cloud/components/Blocks/data/GithubStatusData.tsx
index b39446a979..d96608c5fa 100644
--- a/src/cloud/components/Blocks/data/GithubStatusData.tsx
+++ b/src/cloud/components/Blocks/data/GithubStatusData.tsx
@@ -44,6 +44,8 @@ const GithubStatusData = ({
 
   const openStateSelect: React.MouseEventHandler = useCallback(
     (ev) => {
+      //TOFIX PREVENT GITHUB UPDATE FOR NOW
+      return
       openContextModal(
         ev,
         <GithubStateSelect data={data} onUpdate={updateState} />
@@ -67,7 +69,6 @@ const GithubStatusData = ({
 const StyledStatus = styled.div`
   display: flex;
   align-items: center;
-  cursor: pointer;
 
   & > svg:first-child {
     margin-right: ${({ theme }) => theme.sizes.spaces.xsm}px;
diff --git a/src/cloud/components/Blocks/forms/ContainerForm.tsx b/src/cloud/components/Blocks/forms/ContainerForm.tsx
deleted file mode 100644
index fd3cb18471..0000000000
--- a/src/cloud/components/Blocks/forms/ContainerForm.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useRef, useState, useCallback } from 'react'
-import { useEffectOnce } from 'react-use'
-import Form from '../../../../design/components/molecules/Form'
-import { ContainerBlock } from '../../../api/blocks'
-import { useI18n } from '../../../lib/hooks/useI18n'
-import { lngKeys } from '../../../lib/i18n/types'
-import { FormProps } from '../BlockContent'
-
-const ContainerForm = ({ onSubmit }: FormProps<ContainerBlock>) => {
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [value, setValue] = useState('')
-  const [inputDisabled, setInputDisabled] = useState(false)
-  const { translate } = useI18n()
-
-  const submit = useCallback(async () => {
-    try {
-      setInputDisabled(true)
-      await onSubmit({
-        name: 'container',
-        type: 'container',
-        children: [],
-        data: null,
-      })
-    } finally {
-      setInputDisabled(false)
-    }
-  }, [onSubmit])
-
-  useEffectOnce(() => {
-    if (inputRef.current != null && !inputDisabled) {
-      inputRef.current.focus()
-    }
-  })
-
-  return (
-    <Form
-      fullWidth={true}
-      rows={[
-        {
-          title: 'Name',
-          items: [
-            {
-              type: 'input',
-              props: {
-                disabled: inputDisabled,
-                placeholder: '',
-                value,
-                onChange: (event) => setValue(event.target.value),
-              },
-            },
-          ],
-        },
-      ]}
-      submitButton={{ label: translate(lngKeys.GeneralCreate) }}
-      onSubmit={submit}
-    />
-  )
-}
-
-export default ContainerForm
diff --git a/src/cloud/components/Blocks/forms/EmbedForm.tsx b/src/cloud/components/Blocks/forms/EmbedForm.tsx
index 87f6460c26..d9cc9f77b3 100644
--- a/src/cloud/components/Blocks/forms/EmbedForm.tsx
+++ b/src/cloud/components/Blocks/forms/EmbedForm.tsx
@@ -1,76 +1,74 @@
-import React, { useRef, useState, useCallback } from 'react'
+import { capitalize } from 'lodash'
+import React, { useRef, useState, useCallback, FormEvent } from 'react'
 import { useEffectOnce } from 'react-use'
 import Form from '../../../../design/components/molecules/Form'
-import { Block } from '../../../api/blocks'
+import FormRow from '../../../../design/components/molecules/Form/templates/FormRow'
+import FormRowItem from '../../../../design/components/molecules/Form/templates/FormRowItem'
+import { BlockCreateRequestBody } from '../../../api/blocks'
 import { useI18n } from '../../../lib/hooks/useI18n'
 import { lngKeys } from '../../../lib/i18n/types'
 
 interface EmbedFormProps {
-  onSubmit: (block: Omit<Block<'embed', { url: string }>, 'id'>) => Promise<any>
+  onSubmit: (block: BlockCreateRequestBody) => Promise<any>
 }
 const EmbedForm = ({ onSubmit }: EmbedFormProps) => {
   const inputRef = useRef<HTMLInputElement>(null)
-  const [name, setName] = useState('')
   const [url, setUrl] = useState('')
-  const [inputDisabled, setInputDisabled] = useState(false)
   const { translate } = useI18n()
 
-  const submit = useCallback(async () => {
-    try {
-      setInputDisabled(true)
-      await onSubmit({
-        name,
-        type: 'embed',
-        children: [],
-        data: { url },
-      })
-    } finally {
-      setInputDisabled(false)
-    }
-  }, [onSubmit, name, url])
+  const submit = useCallback(
+    async (event: FormEvent) => {
+      event.preventDefault()
+      try {
+        const nameRegex = new RegExp(
+          /^(?:https?:\/\/)?(?:www\.)?([^\/]*)/,
+          'gi'
+        )
+        const regexResult = nameRegex.exec(url)
+        const name = regexResult != null ? capitalize(regexResult[1]) : 'Embed'
+        await onSubmit({
+          name,
+          type: 'embed',
+          children: [],
+          data: { url },
+        })
+      } finally {
+      }
+    },
+    [onSubmit, url]
+  )
 
   useEffectOnce(() => {
-    if (inputRef.current != null && !inputDisabled) {
+    if (inputRef.current != null) {
       inputRef.current.focus()
     }
   })
 
   return (
-    <Form
-      fullWidth={true}
-      rows={[
-        {
-          title: 'Name',
-          items: [
-            {
-              type: 'input',
-              props: {
-                disabled: inputDisabled,
-                placeholder: '',
-                name,
-                onChange: (event) => setName(event.target.value),
-              },
+    <Form fullWidth={true} onSubmit={submit}>
+      <FormRow fullWidth={true} row={{ title: 'Embed URL' }}>
+        <FormRowItem
+          item={{
+            type: 'input',
+            props: {
+              ref: inputRef,
+              value: url,
+              onChange: (ev) => setUrl(ev.target.value),
             },
-          ],
-        },
-        {
-          title: 'Embed URL',
-          items: [
-            {
-              type: 'input',
-              props: {
-                disabled: inputDisabled,
-                placeholder: '',
-                name,
-                onChange: (event) => setUrl(event.target.value),
-              },
+          }}
+        />
+        <FormRowItem
+          flex='0 0 100px !important'
+          item={{
+            type: 'button',
+            props: {
+              type: 'submit',
+              label: translate(lngKeys.GeneralCreate),
             },
-          ],
-        },
-      ]}
-      submitButton={{ label: translate(lngKeys.GeneralCreate) }}
-      onSubmit={submit}
-    />
+          }}
+        />
+      </FormRow>
+    </Form>
   )
 }
 
diff --git a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
index da1c8098a4..a081914eeb 100644
--- a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
+++ b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
@@ -1,15 +1,10 @@
-import { mdiGithub, mdiPlus } from '@mdi/js'
-import React, {
-  useMemo,
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
-  ChangeEventHandler,
-} from 'react'
+import { mdiDownloadOutline, mdiGithub, mdiPlus } from '@mdi/js'
+import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react'
 import Button from '../../../../design/components/atoms/Button'
 import Icon from '../../../../design/components/atoms/Icon'
+import Scroller from '../../../../design/components/atoms/Scroller'
 import Spinner from '../../../../design/components/atoms/Spinner'
+import { CheckboxWithLabel } from '../../../../design/components/molecules/Form/atoms/FormCheckbox'
 import FormInput from '../../../../design/components/molecules/Form/atoms/FormInput'
 import FormSelect from '../../../../design/components/molecules/Form/atoms/FormSelect'
 import FormRow from '../../../../design/components/molecules/Form/templates/FormRow'
@@ -17,7 +12,6 @@ import FormRowItem from '../../../../design/components/molecules/Form/templates/
 import { useTeamIntegrations } from '../../../../design/lib/stores/integrations'
 import { useToast } from '../../../../design/lib/stores/toast'
 import styled from '../../../../design/lib/styled'
-import { GithubIssueBlock } from '../../../api/blocks'
 import { getAction, IntegrationActionTypes } from '../../../api/integrations'
 import { SerializedTeamIntegration } from '../../../interfaces/db/connections'
 import { usePage } from '../../../lib/stores/pageStore'
@@ -29,7 +23,7 @@ type State =
   | { stage: 'integrate' }
   | { stage: 'issue_select'; integrations: SerializedTeamIntegration[] }
 
-const GithubIssueForm = ({ onSubmit }: FormProps<GithubIssueBlock>) => {
+const GithubIssueForm = ({ onSubmit }: FormProps) => {
   const integrationState = useTeamIntegrations()
   const { team } = usePage()
   const [state, setState] = useState<State>({ stage: 'initialising' })
@@ -176,6 +170,8 @@ type Org = IntegrationActionTypes['orgs:list'][number]
 type Repo = IntegrationActionTypes['org:repos'][number]
 type Issue = IntegrationActionTypes['repo:issues'][number]
 
+const perPagePerQuery = 100
+
 const GithubIssueSelector = ({
   integrations,
   onImport,
@@ -206,7 +202,7 @@ const GithubIssueSelector = ({
     setOrganisations([])
     setCurrentOrg(null)
     setIsLoading(true)
-    getAction(currentIntegration, 'orgs:list')
+    getAction(currentIntegration, 'orgs:list', { per_page: perPagePerQuery })
       .then((orgs) => {
         setOrganisations(orgs)
         setCurrentOrg(orgs[0] || null)
@@ -220,7 +216,10 @@ const GithubIssueSelector = ({
     setCurrentRepo(null)
     if (currentOrg != null) {
       setIsLoading(true)
-      getAction(integrationRef.current, 'org:repos', { org: currentOrg.login })
+      getAction(integrationRef.current, 'org:repos', {
+        org: currentOrg.login,
+        per_page: perPagePerQuery,
+      })
         .then((repos) => {
           setRepos(repos)
           setCurrentRepo(repos[0] || null)
@@ -240,6 +239,7 @@ const GithubIssueSelector = ({
       getAction(integrationRef.current, 'repo:issues', {
         owner: currentRepo.owner.login,
         repo: currentRepo.name,
+        per_page: perPagePerQuery,
       })
         .then((issues) =>
           issues.map((issue) => {
@@ -264,6 +264,7 @@ const GithubIssueSelector = ({
             owner: currentRepo.owner.login,
             repo: currentRepo.name,
             page: page + 1,
+            per_page: perPagePerQuery,
           })
         ).map((issue) => {
           issue.integrationId = integrationId
@@ -332,33 +333,29 @@ const GithubIssueSelector = ({
         )
   }, [issues, search, selectedIssues])
 
-  const toggleAll: React.ChangeEventHandler<HTMLInputElement> = useCallback(
-    (ev) => {
-      if (ev.target.checked) {
-        setSelectedIssues(new Set(issues))
-      } else {
-        setSelectedIssues(new Set())
-      }
-    },
-    [issues]
-  )
+  const toggleAll = useCallback(() => {
+    const allIssuesAreSelected =
+      filteredIssues.length > 0 && filteredIssues.length === selectedIssues.size
+    if (!allIssuesAreSelected) {
+      setSelectedIssues(new Set(issues))
+    } else {
+      setSelectedIssues(new Set())
+    }
+  }, [issues, filteredIssues.length, selectedIssues.size])
+
+  const toggleIssue = useCallback((issue: Issue, selected: boolean) => {
+    return () => {
+      setSelectedIssues((old) => {
+        if (selected) {
+          old.add(issue)
+        } else {
+          old.delete(issue)
+        }
+        return new Set(old)
+      })
+    }
+  }, [])
 
-  const createToggleSelect = useCallback(
-    (issue: Issue): ChangeEventHandler<HTMLInputElement> => {
-      return (ev) => {
-        const checked = ev.target.checked
-        setSelectedIssues((old) => {
-          if (checked) {
-            old.add(issue)
-          } else {
-            old.delete(issue)
-          }
-          return new Set(old)
-        })
-      }
-    },
-    []
-  )
   const runImport = useCallback(async () => {
     try {
       setIsLoading(true)
@@ -420,20 +417,19 @@ const GithubIssueSelector = ({
           />
         </FormRowItem>
       </FormRow>
-      <div className='github-issue__form__table'>
+      <Scroller className='github-issue__form__table'>
         <table>
           <thead>
             <tr>
               <td>
-                <input
-                  type='checkbox'
-                  onChange={toggleAll}
+                <CheckboxWithLabel
+                  toggle={toggleAll}
                   checked={
                     filteredIssues.length > 0 &&
                     filteredIssues.length === selectedIssues.size
                   }
-                />{' '}
-                Title
+                  label={'Title'}
+                />
               </td>
               <td>Assignees</td>
               <td>Status</td>
@@ -445,12 +441,11 @@ const GithubIssueSelector = ({
             {filteredIssues.map((issue) => (
               <tr key={issue.id}>
                 <td>
-                  <input
-                    type='checkbox'
+                  <CheckboxWithLabel
                     checked={selectedIssues.has(issue)}
-                    onChange={createToggleSelect(issue)}
+                    toggle={toggleIssue(issue, !selectedIssues.has(issue))}
+                    label={issue.title}
                   />
-                  <span>{issue.title}</span>
                 </td>
                 <td>
                   {issue.assignees
@@ -468,16 +463,35 @@ const GithubIssueSelector = ({
             ))}
           </tbody>
         </table>
-        <div className='github-issue__form__more'>
-          <Button onClick={getMore}>Get More</Button>
-        </div>
-      </div>
+        {search.trim() !== '' ? (
+          filteredIssues.length === 0 ? (
+            <div className='github-issue__form__placeholder'>
+              No results correspond to your search...
+            </div>
+          ) : null
+        ) : currentRepo != null ? (
+          issues.length !== 0 && issues.length % perPagePerQuery === 0 ? (
+            <div className='github-issue__form__more'>
+              <Button onClick={getMore}>Get More</Button>
+            </div>
+          ) : (
+            <div className='github-issue__form__placeholder'>
+              No more issues could be found...
+            </div>
+          )
+        ) : (
+          <div className='github-issue__form__placeholder'>
+            Please select a repository...
+          </div>
+        )}
+      </Scroller>
       <div className='github-issue__form__action'>
         <Button
           onClick={runImport}
           disabled={selectedIssues.size === 0}
           variant='primary'
         >
+          <Icon path={mdiDownloadOutline} size={16} />
           Import{' '}
           {selectedIssues.size > 0 && <span>({selectedIssues.size})</span>}
         </Button>
@@ -502,6 +516,12 @@ const StyledGithubIssueForm = styled.div`
   display: flex;
   flex-direction: column;
 
+  .github-issue__form__placeholder {
+    padding: ${({ theme }) => theme.sizes.spaces.df}px 0;
+    text-align: center;
+    color: ${({ theme }) => theme.colors.text.subtle};
+  }
+
   & .github-issue__form__title {
     display: flex;
     align-items: center;
@@ -540,8 +560,14 @@ const StyledGithubIssueForm = styled.div`
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: ${({ theme }) => theme.sizes.spaces.md}px 0;
-    border-top: 1px solid ${({ theme }) => theme.colors.border.second};
+    button {
+      width: 100%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      padding: ${({ theme }) => theme.sizes.spaces.sm}px
+        ${({ theme }) => theme.sizes.spaces.df}px;
+    }
   }
 
   & table {
diff --git a/src/cloud/components/Blocks/forms/MarkdownForm.tsx b/src/cloud/components/Blocks/forms/MarkdownForm.tsx
deleted file mode 100644
index 4f70849994..0000000000
--- a/src/cloud/components/Blocks/forms/MarkdownForm.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useRef, useState, useCallback } from 'react'
-import { useEffectOnce } from 'react-use'
-import Form from '../../../../design/components/molecules/Form'
-import { MarkdownBlock } from '../../../api/blocks'
-import { useI18n } from '../../../lib/hooks/useI18n'
-import { lngKeys } from '../../../lib/i18n/types'
-import { FormProps } from '../BlockContent'
-
-const MarkdownForm = ({ onSubmit }: FormProps<MarkdownBlock>) => {
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [value, setValue] = useState('')
-  const [inputDisabled, setInputDisabled] = useState(false)
-  const { translate } = useI18n()
-
-  const submit = useCallback(async () => {
-    try {
-      setInputDisabled(true)
-      await onSubmit({
-        name: value,
-        type: 'markdown',
-        children: [],
-        data: null,
-      })
-    } finally {
-      setInputDisabled(false)
-    }
-  }, [onSubmit, value])
-
-  useEffectOnce(() => {
-    if (inputRef.current != null && !inputDisabled) {
-      inputRef.current.focus()
-    }
-  })
-
-  return (
-    <Form
-      fullWidth={true}
-      rows={[
-        {
-          title: 'Name',
-          items: [
-            {
-              type: 'input',
-              props: {
-                disabled: inputDisabled,
-                placeholder: '',
-                value,
-                onChange: (event) => setValue(event.target.value),
-              },
-            },
-          ],
-        },
-      ]}
-      submitButton={{ label: translate(lngKeys.GeneralCreate) }}
-      onSubmit={submit}
-    />
-  )
-}
-
-export default MarkdownForm
diff --git a/src/cloud/components/Blocks/forms/TableForm.tsx b/src/cloud/components/Blocks/forms/TableForm.tsx
deleted file mode 100644
index dc8fad3dfa..0000000000
--- a/src/cloud/components/Blocks/forms/TableForm.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { useRef, useState, useCallback } from 'react'
-import { useEffectOnce } from 'react-use'
-import Form from '../../../../design/components/molecules/Form'
-import { TableBlock } from '../../../api/blocks'
-import { useI18n } from '../../../lib/hooks/useI18n'
-import { lngKeys } from '../../../lib/i18n/types'
-import { FormProps } from '../BlockContent'
-
-const TableForm = ({ onSubmit }: FormProps<TableBlock>) => {
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [value, setValue] = useState('')
-  const [inputDisabled, setInputDisabled] = useState(false)
-  const { translate } = useI18n()
-
-  const submit = useCallback(async () => {
-    try {
-      setInputDisabled(true)
-      await onSubmit({
-        name: value,
-        type: 'table',
-        children: [],
-        data: { columns: {} },
-      })
-    } finally {
-      setInputDisabled(false)
-    }
-  }, [onSubmit, value])
-
-  useEffectOnce(() => {
-    if (inputRef.current != null && !inputDisabled) {
-      inputRef.current.focus()
-    }
-  })
-
-  return (
-    <Form
-      fullWidth={true}
-      rows={[
-        {
-          title: 'Name',
-          items: [
-            {
-              type: 'input',
-              props: {
-                disabled: inputDisabled,
-                placeholder: '',
-                value,
-                onChange: (event) => setValue(event.target.value),
-              },
-            },
-          ],
-        },
-      ]}
-      submitButton={{ label: translate(lngKeys.GeneralCreate) }}
-      onSubmit={submit}
-    />
-  )
-}
-
-export default TableForm
diff --git a/src/cloud/components/Blocks/props/BoostUserProp.tsx b/src/cloud/components/Blocks/props/BoostUserProp.tsx
index c2826ff2f0..a869432f7f 100644
--- a/src/cloud/components/Blocks/props/BoostUserProp.tsx
+++ b/src/cloud/components/Blocks/props/BoostUserProp.tsx
@@ -1,17 +1,28 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react'
-import FilterableSelectList from '../../../../design/components/molecules/FilterableSelectList'
+import { mdiAccountCircleOutline, mdiClose } from '@mdi/js'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import Icon from '../../../../design/components/atoms/Icon'
 import { useModal } from '../../../../design/lib/stores/modal'
 import styled from '../../../../design/lib/styled'
 import { SerializedUser } from '../../../interfaces/db/user'
+import { useI18n } from '../../../lib/hooks/useI18n'
+import { lngKeys } from '../../../lib/i18n/types'
 import { usePage } from '../../../lib/stores/pageStore'
+import DocPropertyValueButton from '../../DocProperties/DocPropertyValueButton'
+import SearchableOptionListPopup from '../../SearchableOptionListPopup'
 import UserIcon from '../../UserIcon'
 import { BlockPropertyProps } from './types'
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface BoostUserPropProps extends BlockPropertyProps {}
 
-const BoostUserProp = ({ value, onUpdate }: BoostUserPropProps) => {
+const BoostUserProp = ({
+  value,
+  onUpdate,
+  currentUserIsCoreMember,
+}: BoostUserPropProps) => {
   const { permissions = [] } = usePage()
-  const { openContextModal } = useModal()
+  const { openContextModal, closeAllModals } = useModal()
+  const { translate } = useI18n()
 
   const user = useMemo(() => {
     return permissions
@@ -30,57 +41,94 @@ const BoostUserProp = ({ value, onUpdate }: BoostUserPropProps) => {
         ev,
         <UserSelect
           users={permissions.map((perm) => perm.user)}
-          onSelect={(user) => onUpdateRef.current(user.id)}
+          showClearOption={user != null}
+          onSelect={(user) => {
+            if (user != null) {
+              onUpdateRef.current(user.id)
+            } else {
+              onUpdateRef.current('')
+            }
+            return closeAllModals()
+          }}
         />,
         { width: 300 }
       )
     },
-    [permissions]
+    [permissions, openContextModal, closeAllModals, user]
   )
 
   return (
     <Container onClick={openSelector}>
-      {user != null && <UserIcon user={user} />}
+      <DocPropertyValueButton
+        empty={user == null}
+        isReadOnly={!currentUserIsCoreMember}
+        iconPath={user == null ? mdiAccountCircleOutline : undefined}
+        onClick={openSelector}
+      >
+        {user != null ? (
+          <UserIcon user={user} />
+        ) : (
+          translate(lngKeys.Unassigned)
+        )}
+      </DocPropertyValueButton>
     </Container>
   )
 }
 
 const Container = styled.div`
-  cursor: pointer;
-  min-height: 40px;
+  justify-content: center;
 `
 
 interface UserSelectProps {
   users: SerializedUser[]
-  onSelect: (user: SerializedUser) => void
+  showClearOption: boolean
+  onSelect: (user?: SerializedUser) => void
 }
 
-const UserSelect = ({ users, onSelect }: UserSelectProps) => {
+const UserSelect = ({ users, onSelect, showClearOption }: UserSelectProps) => {
+  const [query, setQuery] = useState('')
+
+  const options = useMemo(() => {
+    const userOptions = users
+      .filter((user) => user.displayName.includes(query))
+      .map((user) => {
+        return {
+          label: user.displayName,
+          icon: (
+            <UserIcon
+              className='user__icon'
+              user={user}
+              style={{ marginRight: 4 }}
+            />
+          ),
+          onClick: () => onSelect(user),
+        }
+      })
+
+    return userOptions
+  }, [onSelect, query, users])
+
   return (
-    <UserSelectContainer>
-      <h3>Person</h3>
-      <FilterableSelectList
-        items={users.map((user) => [
-          user.displayName,
-          <div className='user__select__item' onClick={() => onSelect(user)}>
-            <UserIcon className='user__icon' user={user} />
-            {user.displayName}
-          </div>,
-        ])}
-      />
-    </UserSelectContainer>
+    <SearchableOptionListPopup
+      title='Person'
+      query={query}
+      setQuery={setQuery}
+      options={
+        showClearOption
+          ? [
+              ...options,
+              {
+                label: 'Clear',
+                icon: (
+                  <Icon size={16} path={mdiClose} style={{ marginRight: 4 }} />
+                ),
+                onClick: () => onSelect(undefined),
+              },
+            ]
+          : options
+      }
+    />
   )
 }
 
-const UserSelectContainer = styled.div`
-  & .user__select__item {
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    & .user__icon {
-      margin-right: ${({ theme }) => theme.sizes.spaces.xsm}px;
-    }
-  }
-`
-
 export default BoostUserProp
diff --git a/src/cloud/components/Blocks/props/CheckboxProp.tsx b/src/cloud/components/Blocks/props/CheckboxProp.tsx
index b0af6bb185..f11bfcaad7 100644
--- a/src/cloud/components/Blocks/props/CheckboxProp.tsx
+++ b/src/cloud/components/Blocks/props/CheckboxProp.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import { parseBoolean } from '../../../lib/utils/string'
 import { BlockPropertyProps } from './types'
+import Checkbox from '../../../../design/components/molecules/Form/atoms/FormCheckbox'
 
 const CheckboxProp = ({ value, onUpdate }: BlockPropertyProps) => {
   return (
     <div>
-      <input
-        onChange={(ev) => onUpdate(ev.target.checked ? 'true' : 'false')}
-        type='checkbox'
+      <Checkbox
+        toggle={() => onUpdate(parseBoolean(value) === true ? 'false' : 'true')}
         checked={parseBoolean(value)}
       />
     </div>
diff --git a/src/cloud/components/Blocks/props/DataTypeMenu.tsx b/src/cloud/components/Blocks/props/DataTypeMenu.tsx
index f5e02ceee7..699d57328a 100644
--- a/src/cloud/components/Blocks/props/DataTypeMenu.tsx
+++ b/src/cloud/components/Blocks/props/DataTypeMenu.tsx
@@ -6,6 +6,7 @@ import {
   mdiText,
 } from '@mdi/js'
 import React from 'react'
+import MetadataContainer from '../../../../design/components/organisms/MetadataContainer'
 import MetadataContainerRow from '../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
 import { PropType } from '../../../lib/blocks/props'
 
@@ -15,11 +16,12 @@ interface DataTypeMenuProps {
 
 const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => {
   return (
-    <>
+    <MetadataContainer>
       <MetadataContainerRow
         row={{
           type: 'button',
           props: {
+            id: 'add-data-text',
             label: 'Text',
             onClick: () => onSelect('text'),
             iconPath: mdiText,
@@ -30,6 +32,7 @@ const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => {
         row={{
           type: 'button',
           props: {
+            id: 'add-data-number',
             label: 'Number',
             onClick: () => onSelect('number'),
             iconPath: mdiText,
@@ -40,6 +43,7 @@ const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => {
         row={{
           type: 'button',
           props: {
+            id: 'add-data-date',
             label: 'Date',
             onClick: () => onSelect('date'),
             iconPath: mdiCalendarOutline,
@@ -50,6 +54,7 @@ const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => {
         row={{
           type: 'button',
           props: {
+            id: 'add-data-person]',
             label: 'Person (Assignee)',
             onClick: () => onSelect('user'),
             iconPath: mdiAccountCircleOutline,
@@ -60,6 +65,7 @@ const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => {
         row={{
           type: 'button',
           props: {
+            id: 'add-data-url',
             label: 'Url',
             onClick: () => onSelect('url'),
             iconPath: mdiLink,
@@ -70,13 +76,14 @@ const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => {
         row={{
           type: 'button',
           props: {
+            id: 'add-data-checkbox',
             label: 'Checkbox',
             onClick: () => onSelect('checkbox'),
             iconPath: mdiCheckboxMarkedOutline,
           },
         }}
       />
-    </>
+    </MetadataContainer>
   )
 }
 
diff --git a/src/cloud/components/Blocks/props/DateProp.tsx b/src/cloud/components/Blocks/props/DateProp.tsx
index d890e2cb50..cf703d67ad 100644
--- a/src/cloud/components/Blocks/props/DateProp.tsx
+++ b/src/cloud/components/Blocks/props/DateProp.tsx
@@ -1,10 +1,22 @@
-import { format, isValid } from 'date-fns'
+import { mdiCalendarMonthOutline, mdiClose } from '@mdi/js'
+import { isValid } from 'date-fns'
 import React, { useCallback, useMemo } from 'react'
 import DatePicker, { ReactDatePickerProps } from 'react-datepicker'
 import styled from '../../../../design/lib/styled'
+import DocPropertyValueButton from '../../DocProperties/DocPropertyValueButton'
 import { BlockPropertyProps } from './types'
+import { format as formatDate } from 'date-fns'
+import Button from '../../../../design/components/atoms/Button'
+import { useI18n } from '../../../lib/hooks/useI18n'
+import { lngKeys } from '../../../lib/i18n/types'
+import Portal from '../../../../design/components/atoms/Portal'
 
-const DateProp = ({ value, onUpdate }: BlockPropertyProps) => {
+const DateProp = ({
+  value,
+  onUpdate,
+  currentUserIsCoreMember,
+}: BlockPropertyProps) => {
+  const { translate } = useI18n()
   const date = useMemo(() => {
     const parsed = new Date(value)
     return isValid(parsed) ? parsed : null
@@ -24,21 +36,49 @@ const DateProp = ({ value, onUpdate }: BlockPropertyProps) => {
   )
 
   return (
-    <Container>
+    <Container className='doc__due-date__select prop__margin'>
       <DatePicker
+        disabled={!currentUserIsCoreMember}
         selected={date}
         onChange={onChange}
-        popperPlacement='top-end'
+        popperPlacement='auto'
+        popperContainer={CalendarContainer}
         customInput={
-          <div>
-            {date != null ? format(date, 'MMM dd, yyyy') : 'Click to add...'}
-          </div>
+          <DocPropertyValueButton
+            empty={date == null}
+            isReadOnly={!currentUserIsCoreMember}
+            iconPath={mdiCalendarMonthOutline}
+          >
+            {date != null
+              ? formatDate(date, 'MMM dd, yyyy')
+              : translate(lngKeys.DueDate)}
+          </DocPropertyValueButton>
         }
       />
+      {value.trim() !== '' && (
+        <Button
+          variant='icon'
+          iconPath={mdiClose}
+          className='due__date__clear'
+          iconSize={16}
+          size='sm'
+          onClick={() => onUpdate('')}
+        />
+      )}
     </Container>
   )
 }
 
+const CalendarContainer = ({ children }: { children: any }) => {
+  const portalContainer = document.getElementById('block__editor__anchor')
+
+  if (portalContainer == null) {
+    return null
+  }
+
+  return <Portal target={portalContainer}>{children}</Portal>
+}
+
 export default DateProp
 
 const Container = styled.div`
diff --git a/src/cloud/components/Blocks/props/HyperlinkProp.tsx b/src/cloud/components/Blocks/props/HyperlinkProp.tsx
index bfb440102e..eca3ca134e 100644
--- a/src/cloud/components/Blocks/props/HyperlinkProp.tsx
+++ b/src/cloud/components/Blocks/props/HyperlinkProp.tsx
@@ -1,14 +1,20 @@
 import React from 'react'
+import { ExternalLink } from '../../../../design/components/atoms/Link'
 
 interface HyperlinkCellProps {
   href: string
-  label?: string
+  label?: React.ReactNode
 }
 
 const HyperlinkCell = ({ href, label }: HyperlinkCellProps) => {
+  if (href === '') {
+    return null
+  }
   return (
     <div>
-      <a href={href}>{label != null ? label : href}</a>
+      <ExternalLink showIcon={true} href={href}>
+        {label != null ? label : href}
+      </ExternalLink>
     </div>
   )
 }
diff --git a/src/cloud/components/Blocks/props/TextProp.tsx b/src/cloud/components/Blocks/props/TextProp.tsx
index 16a407d766..d61474bd18 100644
--- a/src/cloud/components/Blocks/props/TextProp.tsx
+++ b/src/cloud/components/Blocks/props/TextProp.tsx
@@ -1,29 +1,53 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import styled from '../../../../design/lib/styled'
 import { BlockPropertyProps } from './types'
+import FormTextarea from '../../../../design/components/molecules/Form/atoms/FormTextArea'
+import { useEffectOnce } from 'react-use'
+import { useWindow } from '../../../../design/lib/stores/window'
+import { zIndexModalsBackground } from '../../Topbar/Controls/ControlsContextMenu/styled'
+import ControlsContextMenuBackground from '../../Topbar/Controls/ControlsContextMenu/ControlsContextMenuBackground'
+import InteractableCell from '../views/Table/InteractableCell'
+import { LoadingButton } from '../../../../design/components/atoms/Button'
+import WithTooltip from '../../../../design/components/atoms/WithTooltip'
 
 interface TextPropProps extends BlockPropertyProps {
   validation?: (value: string) => boolean
+  placeholder?: string | React.ReactNode
+  controls?: {
+    tooltip?: string
+    onClick?: () => void
+    iconPath: string
+    id?: string
+    spinning?: boolean
+    disabled?: boolean
+  }[]
 }
 
-const TextProp = ({ value, onUpdate, validation }: TextPropProps) => {
-  const [mode, setMode] = useState<'view' | 'edit'>('view')
+const formWidth = 230
+const formHeight = 80
+const TextProp = ({
+  value,
+  onUpdate,
+  validation,
+  placeholder,
+  currentUserIsCoreMember,
+  controls,
+}: TextPropProps) => {
   const [internal, setInternal] = useState(value)
   const [hasError, setHasError] = useState(false)
-  const textAreaRef = useRef<HTMLTextAreaElement>(null)
-
-  useEffect(() => {
-    setInternal(value)
-  }, [value])
+  const { windowSize } = useWindow()
+  const [contextPosition, setContextPosition] = useState<
+    { top: number; left: number } | undefined
+  >(undefined)
 
   const onBlur = useCallback(() => {
+    setContextPosition(undefined)
     if (validation == null || validation(internal)) {
       onUpdate(internal)
-      setMode('view')
     } else {
       setHasError(true)
     }
-  }, [onUpdate, internal])
+  }, [onUpdate, internal, validation])
 
   const onChange: React.ChangeEventHandler<HTMLTextAreaElement> = useCallback(
     (ev) => {
@@ -33,32 +57,166 @@ const TextProp = ({ value, onUpdate, validation }: TextPropProps) => {
   )
 
   useEffect(() => {
-    if (mode === 'edit' && textAreaRef.current != null) {
+    setInternal(value)
+  }, [value])
+
+  return (
+    <Container>
+      <InteractableCell
+        className={hasError ? 'text-cell--error' : ''}
+        disabled={!currentUserIsCoreMember}
+        onClick={(ev) => {
+          const currentTargetRect = ev.currentTarget.getBoundingClientRect()
+          setContextPosition({
+            left: currentTargetRect.left,
+            top: currentTargetRect.top,
+          })
+        }}
+      >
+        {value.trim() !== '' ? (
+          value
+        ) : (
+          <span className='text-cell__placeholder'>{placeholder}</span>
+        )}
+      </InteractableCell>
+      {controls != null && (
+        <div className='text-cell__controls'>
+          {controls.map((control, key) => (
+            <WithTooltip side='top' key={key} tooltip={control.tooltip}>
+              <LoadingButton
+                variant={control.onClick != null ? 'secondary' : 'transparent'}
+                iconPath={control.iconPath}
+                iconSize={16}
+                size='sm'
+                spinning={control.spinning}
+                onClick={control.onClick}
+                disabled={control.disabled}
+              />
+            </WithTooltip>
+          ))}
+        </div>
+      )}
+      {contextPosition != null && (
+        <TextCellForm
+          contextPosition={{
+            left:
+              contextPosition.left + formWidth < windowSize.width - 10
+                ? contextPosition.left
+                : windowSize.width - formWidth - 10,
+            top:
+              contextPosition.top + formHeight < windowSize.height - 10
+                ? contextPosition.top
+                : windowSize.height - formHeight - 10,
+          }}
+          value={internal}
+          onChange={onChange}
+          onBlur={onBlur}
+          placeholder={
+            typeof placeholder === 'string' ? placeholder : undefined
+          }
+        />
+      )}
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  padding: 0 !important;
+  position: relative;
+
+  .text-cell__placeholder {
+    font-size: ${({ theme }) => theme.sizes.fonts.sm}px;
+    color: ${({ theme }) => theme.colors.text.subtle};
+  }
+
+  .interactable-cell {
+    width: 100%;
+    height: 100%;
+    padding: ${({ theme }) => theme.sizes.spaces.sm}px;
+    display: flex;
+    align-items: center;
+  }
+
+  .text-cell__controls {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+`
+
+const TextCellForm = ({
+  contextPosition,
+  placeholder,
+  value,
+  onChange,
+  onBlur,
+}: {
+  contextPosition: { top: number; left: number }
+  placeholder?: string
+  value?: string
+  onChange: React.ChangeEventHandler<HTMLTextAreaElement>
+  onBlur: () => void
+}) => {
+  const textAreaRef = useRef<HTMLTextAreaElement>(null)
+
+  useEffectOnce(() => {
+    if (textAreaRef.current != null) {
       textAreaRef.current.focus()
+      textAreaRef.current.setSelectionRange(
+        textAreaRef.current.value.length,
+        textAreaRef.current.value.length
+      )
     }
-  }, [mode])
+  })
 
-  if (mode === 'view') {
-    return (
-      <StyledTextCell onClick={() => setMode('edit')}>{value}</StyledTextCell>
-    )
-  }
+  const onKeyDown: React.KeyboardEventHandler<HTMLTextAreaElement> = useCallback(
+    (ev) => {
+      if (ev.key === 'Enter' && !(ev.ctrlKey || ev.metaKey)) {
+        ev.preventDefault()
+        ev.stopPropagation()
+        onBlur()
+        return
+      }
+
+      if (ev.key === 'Esc' || ev.key === 'Escape') {
+        ev.preventDefault()
+        ev.stopPropagation()
+        onBlur()
+      }
+    },
+    [onBlur]
+  )
 
   return (
-    <StyledTextCell className={hasError ? 'text-cell--error' : ''}>
-      <textarea
-        ref={textAreaRef}
-        onBlur={onBlur}
-        onChange={onChange}
-        value={internal}
-      />
-    </StyledTextCell>
+    <>
+      <ControlsContextMenuBackground closeContextMenu={onBlur} />
+      <StyledTextCellForm style={{ ...contextPosition }}>
+        <FormTextarea
+          placeholder={placeholder}
+          value={value}
+          onChange={onChange}
+          ref={textAreaRef}
+          onKeyDown={onKeyDown}
+        />
+      </StyledTextCellForm>
+    </>
   )
 }
 
-export default TextProp
+const StyledTextCellForm = styled.div`
+  position: fixed;
+  z-index: ${zIndexModalsBackground + 1};
+  width: auto !important;
+  height: fit-content !important;
+  padding: 0 !important;
 
-const StyledTextCell = styled.div`
-  min-height: 20px;
-  cursor: pointer;
+  textarea {
+    width: ${formWidth}px;
+    height: ${formHeight}px;
+    background: ${({ theme }) => theme.colors.background.primary};
+    padding: ${({ theme }) => theme.sizes.spaces.xsm}px
+      ${({ theme }) => theme.sizes.spaces.sm}px;
+  }
 `
+
+export default TextProp
diff --git a/src/cloud/components/Blocks/props/index.tsx b/src/cloud/components/Blocks/props/index.tsx
index 396e223be7..bb12008d04 100644
--- a/src/cloud/components/Blocks/props/index.tsx
+++ b/src/cloud/components/Blocks/props/index.tsx
@@ -5,35 +5,92 @@ import CheckboxProp from './CheckboxProp'
 import DateProp from './DateProp'
 import BoostUserProp from './BoostUserProp'
 import { isNumberString, isUrlOrPath } from '../../../lib/utils/string'
+import { mdiExclamationThick, mdiLinkVariant } from '@mdi/js'
 
 interface BlockPropProps {
   type: PropType
   value: string
+  currentUserIsCoreMember: boolean
   onChange: (value: string) => void
 }
-const BlockProp = ({ type, value, onChange }: BlockPropProps) => {
+const BlockProp = ({
+  type,
+  value,
+  onChange,
+  currentUserIsCoreMember,
+}: BlockPropProps) => {
   switch (type) {
     case 'number':
       return (
         <TextProp
+          currentUserIsCoreMember={currentUserIsCoreMember}
           value={value}
           onUpdate={onChange}
           validation={isNumberString}
+          placeholder='...'
         />
       )
     case 'date':
-      return <DateProp value={value} onUpdate={onChange} />
+      return (
+        <DateProp
+          value={value}
+          onUpdate={onChange}
+          currentUserIsCoreMember={currentUserIsCoreMember}
+        />
+      )
     case 'url':
       return (
-        <TextProp value={value} onUpdate={onChange} validation={isUrlOrPath} />
+        <TextProp
+          value={value}
+          onUpdate={onChange}
+          currentUserIsCoreMember={currentUserIsCoreMember}
+          placeholder={'url..'}
+          controls={
+            value.trim() === ''
+              ? undefined
+              : isUrlOrPath(value)
+              ? [
+                  {
+                    iconPath: mdiLinkVariant,
+                    onClick: () => window.open(value, '_blank'),
+                  },
+                ]
+              : [
+                  {
+                    iconPath: mdiExclamationThick,
+                    disabled: true,
+                    tooltip: 'Format of the link is incorrect',
+                  },
+                ]
+          }
+        />
       )
     case 'checkbox':
-      return <CheckboxProp value={value} onUpdate={onChange} />
+      return (
+        <CheckboxProp
+          value={value}
+          onUpdate={onChange}
+          currentUserIsCoreMember={currentUserIsCoreMember}
+        />
+      )
     case 'user':
-      return <BoostUserProp value={value} onUpdate={onChange} />
+      return (
+        <BoostUserProp
+          value={value}
+          onUpdate={onChange}
+          currentUserIsCoreMember={currentUserIsCoreMember}
+        />
+      )
     case 'text':
     default:
-      return <TextProp value={value} onUpdate={onChange} />
+      return (
+        <TextProp
+          value={value}
+          onUpdate={onChange}
+          placeholder='...'
+          currentUserIsCoreMember={currentUserIsCoreMember}
+        />
+      )
   }
 }
 
diff --git a/src/cloud/components/Blocks/props/types.ts b/src/cloud/components/Blocks/props/types.ts
index 4afb07c5d1..00271c736a 100644
--- a/src/cloud/components/Blocks/props/types.ts
+++ b/src/cloud/components/Blocks/props/types.ts
@@ -1,4 +1,5 @@
 export interface BlockPropertyProps {
+  currentUserIsCoreMember: boolean
   value: string
   onUpdate: (val: string) => Promise<void> | void
 }
diff --git a/src/cloud/components/Blocks/views/Container.tsx b/src/cloud/components/Blocks/views/Container.tsx
index fb5998b9e7..a30a282692 100644
--- a/src/cloud/components/Blocks/views/Container.tsx
+++ b/src/cloud/components/Blocks/views/Container.tsx
@@ -1,8 +1,24 @@
-import React, { useState, useCallback } from 'react'
-import { Block, ContainerBlock } from '../../../api/blocks'
+import React, { useCallback } from 'react'
+import { mdiPlusBoxOutline, mdiTrashCanOutline } from '@mdi/js'
+import EmbedForm from '../forms/EmbedForm'
+import {
+  Block,
+  BlockCreateRequestBody,
+  ContainerBlock,
+} from '../../../api/blocks'
 import styled from '../../../../design/lib/styled'
-import { ToggleBlockCreate } from '../BlockCreate'
 import { BlockView, ViewProps } from '.'
+import { getBlockDomId } from '../../../lib/blocks/dom'
+import { useModal } from '../../../../design/lib/stores/modal'
+import BlockCreationModal from '../BlockCreationModal'
+import BlockToolbar from '../BlockToolbar'
+import BlockLayout from '../BlockLayout'
+import { getTableBlockInputId } from './Table'
+
+interface ContainerViewProps extends ViewProps<ContainerBlock> {
+  setCurrentBlock: React.Dispatch<React.SetStateAction<Block | null>>
+  scrollToElement: (elem: HTMLElement | null) => void
+}
 
 const ContainerView = ({
   block,
@@ -10,20 +26,72 @@ const ContainerView = ({
   canvas,
   isChild,
   realtime,
-}: ViewProps<ContainerBlock>) => {
-  const [addSelectOpen, setAddSelectOpen] = useState(false)
+  currentUserIsCoreMember,
+  scrollToElement,
+  setCurrentBlock,
+}: ContainerViewProps) => {
+  const { openModal, closeAllModals } = useModal()
 
   const createBlock = useCallback(
-    async (newBlock: Omit<Block, 'id'>) => {
-      await actions.create(newBlock, block)
-      setAddSelectOpen(false)
+    async (newBlock: BlockCreateRequestBody) => {
+      const createdBlock = await actions.create(newBlock, block)
+      closeAllModals()
+      const blockElem = document.getElementById(getBlockDomId(createdBlock))
+      scrollToElement(blockElem)
+
+      if (createdBlock.type === 'table') {
+        const titleElement = document.getElementById(
+          getTableBlockInputId(createdBlock)
+        )
+        if (titleElement != null) titleElement.focus()
+      }
     },
-    [block, actions]
+    [block, actions, closeAllModals, scrollToElement]
   )
 
+  const createMarkdown = useCallback(() => {
+    return createBlock({
+      name: '',
+      type: 'markdown',
+      children: [],
+      data: null,
+    })
+  }, [createBlock])
+
+  const createTable = useCallback(() => {
+    return createBlock({
+      name: '',
+      type: 'table',
+      children: [],
+      data: { columns: {} },
+    })
+  }, [createBlock])
+
+  const createEmbed = useCallback(() => {
+    openModal(<EmbedForm onSubmit={createBlock} />, {
+      showCloseIcon: true,
+    })
+  }, [createBlock, openModal])
+
   return (
-    <StyledContainerView className={isChild && 'block__view--nested'}>
-      <h1>{canvas.rootBlock.id === block.id ? canvas.title : block.name}</h1>
+    <StyledContainerView
+      className={isChild && 'block__view--nested'}
+      id={getBlockDomId(block)}
+    >
+      <BlockLayout
+        controls={
+          currentUserIsCoreMember && isChild
+            ? [
+                {
+                  iconPath: mdiTrashCanOutline,
+                  onClick: () => actions.remove(block),
+                },
+              ]
+            : []
+        }
+      >
+        <h1>{canvas.rootBlock.id === block.id ? canvas.title : block.name}</h1>
+      </BlockLayout>
       <div className='block__view__container__content'>
         {block.children.map((child) => {
           return (
@@ -34,15 +102,33 @@ const ContainerView = ({
               isChild={true}
               canvas={canvas}
               realtime={realtime}
+              scrollToElement={scrollToElement}
+              setCurrentBlock={setCurrentBlock}
+              currentUserIsCoreMember={currentUserIsCoreMember}
             />
           )
         })}
       </div>
       {!isChild && (
-        <ToggleBlockCreate
-          open={addSelectOpen}
-          onChange={setAddSelectOpen}
-          onSubmit={createBlock}
+        <BlockToolbar
+          controls={[
+            {
+              iconPath: mdiPlusBoxOutline,
+              label: 'Add Block',
+              onClick: () =>
+                openModal(
+                  <BlockCreationModal
+                    onMarkdownCreation={createMarkdown}
+                    onEmbedCreation={createEmbed}
+                    onTableCreation={createTable}
+                  />,
+                  {
+                    title: 'Add a block',
+                    showCloseIcon: true,
+                  }
+                ),
+            },
+          ]}
         />
       )}
     </StyledContainerView>
@@ -51,8 +137,6 @@ const ContainerView = ({
 
 const StyledContainerView = styled.div`
   width: 100%;
-  padding: ${({ theme }) => theme.sizes.spaces.df}px
-    ${({ theme }) => theme.sizes.spaces.xl}px;
 
   & > & h1 {
     font-size: 5px;
@@ -67,7 +151,7 @@ const StyledContainerView = styled.div`
   }
 
   & .block__view__container__content > * {
-    margin-bottom: ${({ theme }) => theme.sizes.spaces.md}px;
+    margin-bottom: ${({ theme }) => theme.sizes.spaces.sm}px;
   }
 `
 
diff --git a/src/cloud/components/Blocks/views/Embed.tsx b/src/cloud/components/Blocks/views/Embed.tsx
index ccf5770b6a..0026a3c2b8 100644
--- a/src/cloud/components/Blocks/views/Embed.tsx
+++ b/src/cloud/components/Blocks/views/Embed.tsx
@@ -1,21 +1,42 @@
+import { mdiTrashCanOutline } from '@mdi/js'
 import React from 'react'
 import { ViewProps } from '.'
 import AspectRatio from '../../../../design/components/atoms/AspectRation'
 import styled from '../../../../design/lib/styled'
 import { EmbedBlock } from '../../../api/blocks'
+import { getBlockDomId } from '../../../lib/blocks/dom'
+import BlockLayout from '../BlockLayout'
 
-const EmbedView = ({ block, isChild }: ViewProps<EmbedBlock>) => {
+const EmbedView = ({
+  block,
+  isChild,
+  actions,
+  currentUserIsCoreMember,
+}: ViewProps<EmbedBlock>) => {
   if (isChild) {
     return (
-      <AspectRatio width={16} height={9}>
-        <StyledEmbedView>
-          <iframe src={block.data.url} allowFullScreen={true}></iframe>
-        </StyledEmbedView>
-      </AspectRatio>
+      <BlockLayout
+        controls={
+          currentUserIsCoreMember
+            ? [
+                {
+                  iconPath: mdiTrashCanOutline,
+                  onClick: () => actions.remove(block),
+                },
+              ]
+            : undefined
+        }
+      >
+        <AspectRatio width={16} height={9}>
+          <StyledEmbedView>
+            <iframe src={block.data.url} allowFullScreen={true}></iframe>
+          </StyledEmbedView>
+        </AspectRatio>
+      </BlockLayout>
     )
   }
   return (
-    <StyledEmbedView>
+    <StyledEmbedView id={getBlockDomId(block)}>
       <iframe src={block.data.url} allowFullScreen={true}></iframe>
     </StyledEmbedView>
   )
diff --git a/src/cloud/components/Blocks/views/GithubIssue.tsx b/src/cloud/components/Blocks/views/GithubIssue.tsx
index 94887fb19c..22c5b865b7 100644
--- a/src/cloud/components/Blocks/views/GithubIssue.tsx
+++ b/src/cloud/components/Blocks/views/GithubIssue.tsx
@@ -1,9 +1,9 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { BlockView, ViewProps } from './'
-import { mdiLink } from '@mdi/js'
+import { mdiGithub, mdiPenPlus, mdiPlusBoxOutline } from '@mdi/js'
 import styled from '../../../../design/lib/styled'
 import Icon from '../../../../design/components/atoms/Icon'
-import { Block, GithubIssueBlock } from '../../../api/blocks'
+import { BlockCreateRequestBody, GithubIssueBlock } from '../../../api/blocks'
 import { useBlockProps } from '../../../lib/hooks/useBlockProps'
 import {
   getPropName,
@@ -13,25 +13,45 @@ import {
   PropType,
 } from '../../../lib/blocks/props'
 import BlockProp from '../props'
-import HyperlinkProp from '../props/HyperlinkProp'
 import GitHubAssigneesData from '../data/GithubAssigneesData'
 import GithubStatusData from '../data/GithubStatusData'
 import GithubLabelsData from '../data/GithubLabelsData'
-import Button from '../../../../design/components/atoms/Button'
 import { useModal } from '../../../../design/lib/stores/modal'
 import DataTypeMenu from '../props/DataTypeMenu'
 import { capitalize } from '../../../lib/utils/string'
-import { ToggleBlockCreate } from '../BlockCreate'
+import { getBlockDomId } from '../../../lib/blocks/dom'
+import Flexbox from '../../../../design/components/atoms/Flexbox'
+import { ExternalLink } from '../../../../design/components/atoms/Link'
+import BlockCreationModal from '../BlockCreationModal'
+import BlockToolbar from '../BlockToolbar'
+import EmbedForm from '../forms/EmbedForm'
+import InfoBlock, {
+  InfoBlockRow,
+} from '../../../../design/components/organisms/InfoBlock'
+import BlockLayout from '../BlockLayout'
+import { getTableBlockInputId } from './Table'
 
 const GithubIssueView = ({
   block,
   realtime,
   actions: blockActions,
   canvas,
+  currentUserIsCoreMember,
+  scrollToElement,
+  setCurrentBlock,
 }: ViewProps<GithubIssueBlock>) => {
   const [propsRecord, actions] = useBlockProps(block, realtime.doc)
-  const { openContextModal, closeAllModals } = useModal()
-  const [blockSelectOpen, setBlockSelectOpen] = useState(false)
+  const { openContextModal, closeAllModals, openModal } = useModal()
+
+  const prURL = block.data?.pull_request?.html_url || ''
+  const repoURL = new RegExp(
+    /(^https:\/\/github.com\/(?:([^\/]+)\/)+)(?:(?:issues|pull\/(?:[0-9]+)))$/,
+    'gi'
+  ).exec(block.data.html_url || '')
+  const isIssueURL = new RegExp(
+    /^https:\/\/github.com\/([^\/]+\/)+issues\/([0-9]+)$/,
+    'gi'
+  ).test(block.data.html_url || '')
 
   const updateBlock = useCallback(
     async (data: GithubIssueBlock['data']) => {
@@ -40,14 +60,6 @@ const GithubIssueView = ({
     [blockActions, block]
   )
 
-  const createBlock = useCallback(
-    async (newBlock: Omit<Block, 'id'>) => {
-      await blockActions.create(newBlock, block)
-      setBlockSelectOpen(false)
-    },
-    [block, blockActions]
-  )
-
   const createPropRef = useRef((type: PropType) => {
     const count = Object.keys(propsRecord).reduce((acc, curr) => {
       return getPropType(curr as PropKey) === type ? acc + 1 : acc
@@ -77,7 +89,8 @@ const GithubIssueView = ({
               closeAllModals()
             }}
           />
-        </div>
+        </div>,
+        { alignment: 'top-left' }
       )
     },
     [openContextModal, closeAllModals]
@@ -91,64 +104,99 @@ const GithubIssueView = ({
     return block.data?.pull_request?.html_url || ''
   }, [block.data])
 
+  const createBlock = useCallback(
+    async (newBlock: BlockCreateRequestBody) => {
+      const createdBlock = await blockActions.create(newBlock, block)
+      closeAllModals()
+      const blockElem = document.getElementById(getBlockDomId(createdBlock))
+      scrollToElement(blockElem)
+
+      if (createdBlock.type === 'table') {
+        const titleElement = document.getElementById(
+          getTableBlockInputId(createdBlock)
+        )
+        if (titleElement != null) titleElement.focus()
+      }
+    },
+    [blockActions, block, closeAllModals, scrollToElement]
+  )
+
+  const createMarkdown = useCallback(() => {
+    return createBlock({
+      name: '',
+      type: 'markdown',
+      children: [],
+      data: null,
+    })
+  }, [createBlock])
+
+  const createTable = useCallback(() => {
+    return createBlock({
+      name: '',
+      type: 'table',
+      children: [],
+      data: { columns: {} },
+    })
+  }, [createBlock])
+
+  const createEmbed = useCallback(() => {
+    openModal(<EmbedForm onSubmit={createBlock} />, {
+      showCloseIcon: true,
+    })
+  }, [createBlock, openModal])
+
   return (
-    <StyledGithubIssueView>
-      <h1>{block.data.title}</h1>
-      <div className='github-issue__view__info'>
-        <div>
-          <div>Issue number</div>
-          <div>
-            <a href={block.data.html_url}>
-              <div>
-                <span>#{block.data.number}</span>
-                <Icon path={mdiLink} />
-              </div>
-            </a>
-          </div>
-        </div>
-        <div>
-          <div>Assignees</div>
-          <div>
+    <StyledGithubIssueView id={getBlockDomId(block)}>
+      <BlockLayout>
+        <Flexbox alignItems='center' className='github-issue__view__title'>
+          <Icon path={mdiGithub} size={26} />
+          <h1>{block.data.title}</h1>
+        </Flexbox>
+        <InfoBlock className='github-issue__view__info'>
+          {repoURL != null && (
+            <InfoBlockRow label='Repository'>
+              <ExternalLink href={repoURL[1]} showIcon={true}>
+                {repoURL[2]}
+              </ExternalLink>
+            </InfoBlockRow>
+          )}
+          {isIssueURL && (
+            <InfoBlockRow label='Issue number'>
+              <ExternalLink href={block.data.html_url || ''} showIcon={true}>
+                #{block.data.number}
+              </ExternalLink>
+            </InfoBlockRow>
+          )}
+          {prURL !== '' && (
+            <InfoBlockRow label='Linked PR'>
+              <ExternalLink href={prUrl} showIcon={true}>
+                #{block.data.pull_request.number || block.data.number}
+              </ExternalLink>
+            </InfoBlockRow>
+          )}
+          <InfoBlockRow label='Assignees'>
             <GitHubAssigneesData data={block.data} onUpdate={updateBlock} />
-          </div>
-        </div>
-        <div>
-          <div>Status</div>
-          <div>
+          </InfoBlockRow>
+          <InfoBlockRow label='Status'>
             <GithubStatusData data={block.data} onUpdate={updateBlock} />
-          </div>
-        </div>
-        <div>
-          <div>Labels</div>
-          <div>
+          </InfoBlockRow>
+          <InfoBlockRow label='Labels'>
             <GithubLabelsData data={block.data} onUpdate={updateBlock} />
-          </div>
-        </div>
-        <div>
-          <div>Linked PR</div>
-          <div>
-            <HyperlinkProp href={prUrl} label={getPRNumFromUrl(prUrl)} />
-          </div>
-        </div>
-
-        {props.map(([key, value]) => {
-          return (
-            <div key={key}>
-              <div>{getPropName(key)}</div>
-              <div>
+          </InfoBlockRow>
+          {props.map(([key, value]) => {
+            return (
+              <InfoBlockRow label={getPropName(key)} key={`custom-${key}`}>
                 <BlockProp
+                  currentUserIsCoreMember={currentUserIsCoreMember}
                   type={getPropType(key)}
                   value={value}
                   onChange={(newValue) => actions.set(key, newValue)}
                 />
-              </div>
-            </div>
-          )
-        })}
-      </div>
-      <div>
-        <Button onClick={openPropAdd}>+ Add Prop</Button>
-      </div>
+              </InfoBlockRow>
+            )
+          })}
+        </InfoBlock>
+      </BlockLayout>
       <div className='github-issue__view__children'>
         {block.children.map((child) => {
           return (
@@ -159,48 +207,63 @@ const GithubIssueView = ({
               isChild={true}
               canvas={canvas}
               realtime={realtime}
+              setCurrentBlock={setCurrentBlock}
+              scrollToElement={scrollToElement}
+              currentUserIsCoreMember={currentUserIsCoreMember}
             />
           )
         })}
       </div>
-      <ToggleBlockCreate
-        open={blockSelectOpen}
-        onChange={setBlockSelectOpen}
-        onSubmit={createBlock}
+      <BlockToolbar
+        controls={[
+          {
+            iconPath: mdiPenPlus,
+            label: 'Add Property',
+            onClick: (ev) => openPropAdd(ev),
+          },
+          {
+            iconPath: mdiPlusBoxOutline,
+            label: 'Add Block',
+            onClick: () =>
+              openModal(
+                <BlockCreationModal
+                  onMarkdownCreation={createMarkdown}
+                  onEmbedCreation={createEmbed}
+                  onTableCreation={createTable}
+                />,
+                {
+                  title: 'Add a block',
+                  showCloseIcon: true,
+                }
+              ),
+          },
+        ]}
       />
     </StyledGithubIssueView>
   )
 }
 
 const StyledGithubIssueView = styled.div`
-  .github-issue__view__info {
-    & > div {
-      display: flex;
-      align-items: center;
-      padding: ${({ theme }) => theme.sizes.spaces.sm}px 0;
-      & > div:first-child {
-        color: ${({ theme }) => theme.colors.text.subtle};
-      }
+  h1 {
+    margin: 0;
+  }
 
-      & > div {
-        min-width: 100px;
-      }
-    }
+  .github-issue__view__title .icon {
+    margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
+  }
 
-    & a {
-      color: ${({ theme }) => theme.colors.text.primary};
-      text-decoration: none;
-    }
+  .block__layout + .block__layout {
+    margin-top: ${({ theme }) => theme.sizes.spaces.sm}px;
   }
 
-  .github-issue__view__children > * {
-    margin-bottom: ${({ theme }) => theme.sizes.spaces.md}px;
+  .github-issue__view__info {
+    margin-top: ${({ theme }) => theme.sizes.spaces.md}px;
+
+    .text-cell__controls {
+      right: initial;
+      left: 100%;
+    }
   }
 `
 
-function getPRNumFromUrl(url: string) {
-  const num = url.split('/').pop()
-  return num != null && num !== '' ? `#${num}` : url
-}
-
 export default GithubIssueView
diff --git a/src/cloud/components/Blocks/views/Markdown.tsx b/src/cloud/components/Blocks/views/Markdown.tsx
index 35ea21f364..cc6ed25c9c 100644
--- a/src/cloud/components/Blocks/views/Markdown.tsx
+++ b/src/cloud/components/Blocks/views/Markdown.tsx
@@ -7,10 +7,17 @@ import { ViewProps } from './'
 import MarkdownPreview from '../../MarkdownView'
 import { CodemirrorBinding } from 'y-codemirror'
 import Spinner from '../../../../design/components/atoms/Spinner'
-import Icon from '../../../../design/components/atoms/Icon'
-import { mdiEyeOutline, mdiPencil } from '@mdi/js'
+import { mdiEyeOutline, mdiPencil, mdiTrashCanOutline } from '@mdi/js'
+import { getBlockDomId } from '../../../lib/blocks/dom'
+import cc from 'classcat'
+import BlockLayout from '../BlockLayout'
 
-const MarkdownView = ({ block, realtime }: ViewProps<MarkdownBlock>) => {
+const MarkdownView = ({
+  block,
+  realtime,
+  actions,
+  currentUserIsCoreMember,
+}: ViewProps<MarkdownBlock>) => {
   const [mode, setMode] = useState<'editor' | 'view'>('view')
   const [editorContent, setEditorContent] = useState('')
   const [synced, setSynced] = useState(realtime.synced)
@@ -46,11 +53,6 @@ const MarkdownView = ({ block, realtime }: ViewProps<MarkdownBlock>) => {
     }
   }, [settings])
 
-  useEffect(() => {
-    realtime.on('sync', setSynced)
-    return () => realtime.off('sync', setSynced)
-  }, [realtime])
-
   const bindCallback = useCallback(
     (editor: CodeMirror.Editor) => {
       setEditorContent(editor.getValue())
@@ -71,30 +73,60 @@ const MarkdownView = ({ block, realtime }: ViewProps<MarkdownBlock>) => {
 
   const toggleMode = useCallback(() => {
     setMode((mode) => (mode === 'view' ? 'editor' : 'view'))
-    editorRef.current && editorRef.current.refresh()
   }, [])
 
-  if (!synced) {
-    return (
-      <StyledMarkdownView className='block__markdown--mode-loading'>
-        <Spinner />
-      </StyledMarkdownView>
-    )
-  }
+  useEffect(() => {
+    realtime.on('sync', setSynced)
+    return () => realtime.off('sync', setSynced)
+  }, [realtime])
+
+  useEffect(() => {
+    if (mode === 'editor' && editorRef.current != null) {
+      editorRef.current.refresh()
+      editorRef.current.focus()
+    }
+  }, [mode])
 
   return (
-    <StyledMarkdownView className={`block__markdown--mode-${mode}`}>
-      <div className='block__markdown--toolbar' onClick={toggleMode}>
-        <Icon path={mode === 'view' ? mdiPencil : mdiEyeOutline} size={16} />
-      </div>
-      <div className='block__markdown--editor'>
-        <CodeMirrorEditor bind={bindCallback} config={editorConfig} />
-      </div>
-      <MarkdownPreview
-        className='block__markdown--preview'
-        content={editorContent}
-      />
-    </StyledMarkdownView>
+    <BlockLayout
+      controls={
+        currentUserIsCoreMember
+          ? [
+              {
+                iconPath: mode === 'view' ? mdiPencil : mdiEyeOutline,
+                onClick: toggleMode,
+              },
+              {
+                iconPath: mdiTrashCanOutline,
+                onClick: () => actions.remove(block),
+              },
+            ]
+          : undefined
+      }
+    >
+      <StyledMarkdownView
+        className={cc([
+          !synced
+            ? 'block__markdown--mode-loading'
+            : `block__markdown--mode-${mode}`,
+        ])}
+        id={getBlockDomId(block)}
+      >
+        {!synced ? (
+          <Spinner />
+        ) : (
+          <>
+            <div className='block__markdown--editor'>
+              <CodeMirrorEditor bind={bindCallback} config={editorConfig} />
+            </div>
+            <MarkdownPreview
+              className='block__markdown--preview'
+              content={editorContent}
+            />
+          </>
+        )}
+      </StyledMarkdownView>
+    </BlockLayout>
   )
 }
 
@@ -102,10 +134,6 @@ const StyledMarkdownView = styled.div`
   position: relative;
   min-height: 20px;
 
-  &:hover .block__markdown--toolbar {
-    display: block;
-  }
-
   & .block__markdown--toolbar {
     display: none;
     position: absolute;
@@ -120,7 +148,6 @@ const StyledMarkdownView = styled.div`
   }
 
   & > .block__markdown--preview {
-    background-color: ${({ theme }) => theme.colors.background.primary};
     padding: 0;
   }
 
diff --git a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
index e3a2bc80e0..071cca690e 100644
--- a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
@@ -6,6 +6,7 @@ import {
 } from '@mdi/js'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import FormInput from '../../../../../design/components/molecules/Form/atoms/FormInput'
+import MetadataContainer from '../../../../../design/components/organisms/MetadataContainer'
 import MetadataContainerBreak from '../../../../../design/components/organisms/MetadataContainer/atoms/MetadataContainerBreak'
 import MetadataContainerRow from '../../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
 import { useModal } from '../../../../../design/lib/stores/modal'
@@ -87,59 +88,76 @@ const ColumnSettings = ({
   }, [colKey])
 
   return (
-    <Container>
-      <MetadataContainerRow row={{ type: 'header', content: 'NAME' }} />
-      <FormInput value={name} onChange={onChange} />
-      <MetadataContainerRow
-        row={{
-          type: 'header',
-          content: dataType === 'prop' ? 'GITHUB PARAMETER' : 'PROPERTY TYPE',
-        }}
-      />
-      {dataType !== 'prop' && (
+    <MetadataContainer>
+      <Container>
+        <MetadataContainerRow row={{ type: 'header', content: 'NAME' }} />
+        <FormInput
+          value={name}
+          onChange={onChange}
+          id='column-input-setting'
+          onKeyDown={(ev) => {
+            if (ev.key === 'Enter' && !(ev.ctrlKey || ev.metaKey)) {
+              ev.preventDefault()
+              ev.stopPropagation()
+              closeAllModals()
+            }
+          }}
+        />
+        <MetadataContainerRow
+          row={{
+            type: 'header',
+            content: dataType === 'prop' ? 'GITHUB PARAMETER' : 'PROPERTY TYPE',
+          }}
+        />
+        {dataType !== 'prop' && (
+          <MetadataContainerRow
+            row={{
+              type: 'button',
+              props: {
+                label: capitalize(dataType),
+                iconPath: mdiAccountCircleOutline,
+                onClick: openTypeSelector,
+                id: 'column-setting-type',
+              },
+            }}
+          />
+        )}
+        <MetadataContainerBreak />
+        <MetadataContainerRow
+          row={{
+            type: 'button',
+            props: {
+              label: 'Move left',
+              iconPath: mdiArrowLeftBold,
+              onClick: () => moveColumn(col, 'left'),
+              id: 'column-setting-moveleft',
+            },
+          }}
+        />
+        <MetadataContainerRow
+          row={{
+            type: 'button',
+            props: {
+              label: 'Move right',
+              iconPath: mdiArrowRightBold,
+              onClick: () => moveColumn(col, 'right'),
+              id: 'column-setting-moveright',
+            },
+          }}
+        />
         <MetadataContainerRow
           row={{
             type: 'button',
             props: {
-              label: capitalize(dataType),
-              iconPath: mdiAccountCircleOutline,
-              onClick: openTypeSelector,
+              label: 'Delete',
+              iconPath: mdiTrashCanOutline,
+              onClick: () => deleteCol(col),
+              id: 'column-setting-delete',
             },
           }}
         />
-      )}
-      <MetadataContainerBreak />
-      <MetadataContainerRow
-        row={{
-          type: 'button',
-          props: {
-            label: 'Move left',
-            iconPath: mdiArrowLeftBold,
-            onClick: () => moveColumn(col, 'left'),
-          },
-        }}
-      />
-      <MetadataContainerRow
-        row={{
-          type: 'button',
-          props: {
-            label: 'Move right',
-            iconPath: mdiArrowRightBold,
-            onClick: () => moveColumn(col, 'right'),
-          },
-        }}
-      />
-      <MetadataContainerRow
-        row={{
-          type: 'button',
-          props: {
-            label: 'Delete',
-            iconPath: mdiTrashCanOutline,
-            onClick: () => deleteCol(col),
-          },
-        }}
-      />
-    </Container>
+      </Container>
+    </MetadataContainer>
   )
 }
 
diff --git a/src/cloud/components/Blocks/views/Table/InteractableCell.tsx b/src/cloud/components/Blocks/views/Table/InteractableCell.tsx
new file mode 100644
index 0000000000..17cc5df0f4
--- /dev/null
+++ b/src/cloud/components/Blocks/views/Table/InteractableCell.tsx
@@ -0,0 +1,44 @@
+import React, { PropsWithChildren } from 'react'
+import styled from '../../../../../design/lib/styled'
+import { ControlButtonProps } from '../../../../../design/lib/types'
+import cc from 'classcat'
+
+interface InteractableCellProps {
+  disabled: boolean
+  className?: string
+  hoverControls?: ControlButtonProps[]
+  onClick?: (ev: React.MouseEvent<HTMLDivElement>) => void
+}
+
+const InteractableCell = ({
+  disabled,
+  children,
+  onClick,
+  className,
+}: PropsWithChildren<InteractableCellProps>) => {
+  return (
+    <Container
+      className={cc([
+        'interactable-cell',
+        disabled && `interactable-cell--disabled`,
+        className,
+      ])}
+      onClick={disabled ? undefined : onClick}
+    >
+      {children}
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  position: relative;
+
+  &:not(.interactable-cell--disabled) {
+    cursor: pointer;
+    &:hover {
+      background: ${({ theme }) => theme.colors.background.secondary};
+    }
+  }
+`
+
+export default InteractableCell
diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
index f965007462..f8683ad795 100644
--- a/src/cloud/components/Blocks/views/Table/index.tsx
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -1,45 +1,53 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { ViewProps } from '../'
-import { mdiCog, mdiPlus } from '@mdi/js'
+import { mdiCog, mdiDownloadOutline, mdiTrashCanOutline } from '@mdi/js'
 import GithubIssueForm from '../../forms/GithubIssueForm'
 import {
   Column,
   getColumnName,
   getDataPropColProp,
   isDataPropCol,
+  getDataColumnIcon,
 } from '../../../../lib/blocks/table'
-import TextProp from '../../props/TextProp'
-import CheckboxProp from '../../props/CheckboxProp'
-import DateProp from '../../props/DateProp'
 import GitHubAssigneesData from '../../data/GithubAssigneesData'
 import GithubStatusData from '../../data/GithubStatusData'
 import GithubLabelsData from '../../data/GithubLabelsData'
 import HyperlinkProp from '../../props/HyperlinkProp'
 import TableSettings from './TableSettings'
 import ColumnSettings from './ColumnSettings'
-import BoostUserProp from '../../props/BoostUserProp'
 import { Block, TableBlock } from '../../../../api/blocks'
 import { useModal } from '../../../../../design/lib/stores/modal'
 import Icon from '../../../../../design/components/atoms/Icon'
-import Button from '../../../../../design/components/atoms/Button'
-import {
-  capitalize,
-  isNumberString,
-  isUrlOrPath,
-} from '../../../../lib/utils/string'
 import styled from '../../../../../design/lib/styled'
 import { StyledUserIcon } from '../../../UserIcon'
 import { BlockDataProps } from '../../data/types'
 import { getPropType } from '../../../../lib/blocks/props'
 import { useBlockTable } from '../../../../lib/hooks/useBlockTable'
-import BlockIcon from '../../BlockIcon'
 import BlockProp from '../../props'
+import Scroller from '../../../../../design/components/atoms/Scroller'
+import { getBlockDomId } from '../../../../lib/blocks/dom'
+import Flexbox from '../../../../../design/components/atoms/Flexbox'
+import BlockLayout from '../../BlockLayout'
+import FormInput from '../../../../../design/components/molecules/Form/atoms/FormInput'
+import { useDebounce } from 'react-use'
+import BlockTree from '../../BlockTree'
 
 type GithubCellProps = BlockDataProps<TableBlock['children'][number]>
+interface TableViewProps extends ViewProps<TableBlock> {
+  setCurrentBlock: React.Dispatch<React.SetStateAction<Block | null>>
+}
 
-const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
+const TableView = ({
+  block,
+  actions,
+  realtime,
+  currentUserIsCoreMember,
+  setCurrentBlock,
+}: TableViewProps) => {
   const { openModal, openContextModal, closeAllModals } = useModal()
   const { state, actions: tableActions } = useBlockTable(block, realtime.doc)
+  const [tableTitle, setTableTitle] = useState(block.name || '')
+  const tableRef = useRef<string>(block.id)
 
   const subscriptionsRef = useRef<Set<(col: Column[]) => void>>(new Set())
   useEffect(() => {
@@ -118,8 +126,9 @@ const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
   const importIssues = useCallback(() => {
     openModal(
       <GithubIssueForm
-        onSubmit={(issueBlock) => {
-          return actions.create(issueBlock, block)
+        onSubmit={async (issueBlock) => {
+          await actions.create(issueBlock, block)
+          return closeAllModals()
         }}
       />,
       {
@@ -127,83 +136,150 @@ const TableView = ({ block, actions, realtime }: ViewProps<TableBlock>) => {
         showCloseIcon: true,
       }
     )
-  }, [openModal, actions, block])
+  }, [openModal, actions, block, closeAllModals])
+
+  const onTableNameChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      readyToBeSentRef.current = true
+      setTableTitle(e.target.value)
+    },
+    []
+  )
+  const readyToBeSentRef = useRef<boolean>(false)
+  const [, cancel] = useDebounce(
+    async () => {
+      if (readyToBeSentRef.current) {
+        await actions.update({
+          id: block.id,
+          type: block.type,
+          name: tableTitle,
+        })
+        readyToBeSentRef.current = false
+      } else {
+        cancel()
+      }
+    },
+    1000,
+    [tableTitle]
+  )
+
+  useEffect(() => {
+    if (tableRef.current !== block.id) {
+      tableRef.current = block.id
+      setTableTitle(block.name)
+    }
+  }, [block])
 
+  const anchorId = `block__${block.id}__table`
   return (
-    <StyledTableView>
-      <div className='block__table__view__wrapper'>
-        <table>
-          <thead>
-            <tr>
-              <th>Title</th>
-              {state.columns.map((col) => (
-                <th
-                  key={col}
-                  className='block__table__view--interactable'
-                  onClick={(ev) => openColumnSettings(ev, col)}
-                >
-                  {getColumnName(col)}
-                </th>
-              ))}
-              <th
-                onClick={openTableSettings}
-                className='block__table__view--no-borders block__table__view--interactable'
-              >
-                <Icon path={mdiCog} />
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {block.children.map((child) => {
-              return (
-                <tr key={child.id}>
-                  <td>
-                    <div>{child.data.title}</div>
-                    {child.children.map((ancestor) => {
-                      return (
-                        <div
-                          key={ancestor.id}
-                          className='block__table__view__child__label'
-                        >
-                          <BlockIcon block={ancestor} size={16} />
-                          <span>{blockTitle(ancestor)}</span>
-                        </div>
-                      )
-                    })}
-                  </td>
+    <BlockLayout
+      controls={
+        currentUserIsCoreMember
+          ? [
+              {
+                iconPath: mdiCog,
+                onClick: openTableSettings,
+              },
+              {
+                iconPath: mdiTrashCanOutline,
+                onClick: () => actions.remove(block),
+              },
+            ]
+          : undefined
+      }
+    >
+      <StyledTableView id={getBlockDomId(block)}>
+        <FormInput
+          placeholder='Untitled'
+          value={tableTitle}
+          onChange={onTableNameChange}
+          className='block__table__title'
+          id={getTableBlockInputId(block)}
+          disabled={!currentUserIsCoreMember}
+        />
+        <div id={anchorId} />
+        <div className='block__table__view__wrapper'>
+          <Scroller>
+            <table>
+              <thead>
+                <tr>
+                  <th>Title</th>
                   {state.columns.map((col) => (
-                    <td key={col}>
-                      {isDataPropCol(col) ? (
-                        <GithubCell
-                          prop={getDataPropColProp(col)}
-                          data={child.data}
-                          onUpdate={(data) =>
-                            updateIssueBlock({ ...child, data })
-                          }
-                        />
-                      ) : (
-                        <BlockProp
-                          type={getPropType(col)}
-                          value={(state.rowData.get(child.id) || {})[col] || ''}
-                          onChange={(val) =>
-                            tableActions.setCell(child.id, col, val)
-                          }
-                        />
-                      )}
-                    </td>
+                    <th key={col} className='block__table__view--interactable'>
+                      <button onClick={(ev) => openColumnSettings(ev, col)}>
+                        <Flexbox alignItems='center'>
+                          <Icon
+                            path={getDataColumnIcon(col)}
+                            size={16}
+                            className='block__table__header__icon'
+                          />
+                          <span>{getColumnName(col)}</span>
+                        </Flexbox>
+                      </button>
+                    </th>
                   ))}
                 </tr>
-              )
-            })}
-          </tbody>
-        </table>
-      </div>
-      <div className='block__table__view__import'>
-        <Button onClick={importIssues} variant='transparent' iconPath={mdiPlus}>
+              </thead>
+              <tbody>
+                {block.children.map((child) => {
+                  return (
+                    <tr key={child.id}>
+                      <td>
+                        <Flexbox
+                          direction='column'
+                          alignItems='baseline'
+                          justifyContent='center'
+                        >
+                          <BlockTree
+                            root={child}
+                            onSelect={setCurrentBlock}
+                            onDelete={actions.remove}
+                            className='table__title__tree'
+                          />
+                        </Flexbox>
+                      </td>
+                      {state.columns.map((col) => (
+                        <td key={col}>
+                          {isDataPropCol(col) ? (
+                            <GithubCell
+                              prop={getDataPropColProp(col)}
+                              data={child.data}
+                              onUpdate={(data) =>
+                                updateIssueBlock({ ...child, data })
+                              }
+                            />
+                          ) : (
+                            <BlockProp
+                              currentUserIsCoreMember={currentUserIsCoreMember}
+                              type={getPropType(col)}
+                              value={
+                                (state.rowData.get(child.id) || {})[col] || ''
+                              }
+                              onChange={(val) =>
+                                tableActions.setCell(child.id, col, val)
+                              }
+                            />
+                          )}
+                        </td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </Scroller>
+        </div>
+
+        <button
+          className='block__table__view__import'
+          onClick={importIssues}
+          id={`block__table__import__${block.id}`}
+        >
+          <Icon path={mdiDownloadOutline} size={16} />
           Import
-        </Button>
-      </div>
-    </StyledTableView>
+        </button>
+      </StyledTableView>
+    </BlockLayout>
   )
 }
 
@@ -249,14 +325,31 @@ const GithubCell = ({
         />
       ) : null
     case 'repo':
+      const issueUrl = data.html_url || ''
+      const repoRegex = new RegExp(
+        /(^https:\/\/github.com\/(?:([^\/]+)\/)+)(?:(?:issues|pull\/(?:[0-9]+)))$/,
+        'gi'
+      )
+      const matches = repoRegex.exec(issueUrl)
       return (
         <HyperlinkProp
-          href={data?.repository?.html_url}
-          label={data?.repository?.full_name}
+          href={matches != null ? matches[1] : issueUrl}
+          label={
+            matches != null ? matches[2] : data.repository_url.split('/').pop()
+          }
         />
       )
     case 'issue_number':
-      return <div>#{data.number}</div>
+      const issueURL = data?.html_url || ''
+      const issueRegex = new RegExp(
+        /^https:\/\/github.com\/([^\/]+\/)+issues\/([0-9]+)$/,
+        'gi'
+      )
+      if (issueRegex.test(issueURL)) {
+        return <HyperlinkProp href={issueURL} label={`#${data.number}`} />
+      } else {
+        return null
+      }
     case 'body':
       return <div>{data.body}</div>
     case 'milestone':
@@ -279,10 +372,52 @@ function getPRNumFromUrl(url: string) {
 const StyledTableView = styled.div`
   position: relative;
 
+  .table__title__tree {
+    .navigation__item__label__ellipsis {
+      max-width: 300px;
+    }
+
+    .navigation__item__controls {
+      display: block;
+      opacity: 0;
+    }
+
+    .navigation__item__wrapper:hover .navigation__item__controls {
+      opacity: 1;
+    }
+  }
+
+  .table__title__tree:not(.block__editor__nav--tree)
+    > .block__editor__nav--item:first-of-type::before {
+    display: none;
+  }
+
+  .block__table__title {
+    width: 100%;
+    border: 0;
+    font-size: ${({ theme }) => theme.sizes.fonts.l}px;
+    font-weight: 600;
+  }
+
+  .block__table__cell--shrinked {
+    width: 1%;
+    white-space: nowrap;
+  }
+
   & .block__table__view--interactable {
     cursor: pointer;
+
+    &:active {
+      background-color: ${({ theme }) => theme.colors.background.tertiary};
+    }
+
+    &:focus {
+      background-color: ${({ theme }) => theme.colors.background.quaternary};
+    }
+
     &:hover {
       color: ${({ theme }) => theme.colors.text.primary};
+      background-color: ${({ theme }) => theme.colors.background.secondary};
     }
   }
 
@@ -295,6 +430,8 @@ const StyledTableView = styled.div`
     width: 100%;
     text-align: left;
     border-collapse: separate;
+    position: relative;
+    z-index: 0;
   }
 
   & td:first-child,
@@ -309,6 +446,9 @@ const StyledTableView = styled.div`
   & td > div {
     height: 100%;
     width: 100%;
+    padding: ${({ theme }) => theme.sizes.spaces.sm}px;
+    display: flex;
+    align-items: center;
   }
 
   & .block__table__view--no-borders {
@@ -316,13 +456,37 @@ const StyledTableView = styled.div`
   }
 
   & th {
-    color: ${({ theme }) => theme.colors.text.secondary};
     border-top: 1px solid ${({ theme }) => theme.colors.border.main};
+    color: ${({ theme }) => theme.colors.text.subtle};
+
+    &:not(.block__table__view--interactable),
+    > button {
+      padding: ${({ theme }) => theme.sizes.spaces.sm}px;
+    }
+
+    > button {
+      background: none;
+      color: ${({ theme }) => theme.colors.text.subtle};
+      border: 0;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .block__table__header__icon {
+    margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
+    flex: 0 0 auto;
   }
 
   & td {
     min-width: 130px;
     min-height: 20px;
+    height: 1px;
+  }
+
+  td,
+  th {
+    position: relative;
   }
 
   & td,
@@ -330,11 +494,25 @@ const StyledTableView = styled.div`
     width: 130px;
     border-right: 1px solid ${({ theme }) => theme.colors.border.main};
     border-bottom: 1px solid ${({ theme }) => theme.colors.border.main};
-    padding: ${({ theme }) => theme.sizes.spaces.sm}px;
   }
 
   & .block__table__view__import {
+    width: 100%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
     border-bottom: 1px solid ${({ theme }) => theme.colors.border.main};
+    color: ${({ theme }) => theme.colors.text.subtle};
+    padding: ${({ theme }) => theme.sizes.spaces.sm}px
+      ${({ theme }) => theme.sizes.spaces.df}px;
+
+    background: ${({ theme }) => theme.colors.background.primary};
+    &:focus {
+      background: ${({ theme }) => theme.colors.background.quaternary};
+    }
+    &:hover {
+      background: ${({ theme }) => theme.colors.background.tertiary};
+    }
   }
 
   & .block__table__view__child__label {
@@ -369,15 +547,8 @@ const StyledTableView = styled.div`
   }
 `
 
-function blockTitle(block: Block) {
-  switch (block.type) {
-    case 'github.issue':
-      return block.data.number != null
-        ? `#${block.data.number}`
-        : 'Github Issue'
-    default:
-      return capitalize(block.type)
-  }
+export function getTableBlockInputId(block: Block) {
+  return `${block.id}-title`
 }
 
 export default TableView
diff --git a/src/cloud/components/Blocks/views/index.tsx b/src/cloud/components/Blocks/views/index.tsx
index d0b3f5e20f..f7ff108cb2 100644
--- a/src/cloud/components/Blocks/views/index.tsx
+++ b/src/cloud/components/Blocks/views/index.tsx
@@ -15,6 +15,9 @@ export interface ViewProps<T extends Block> {
   canvas: Canvas
   realtime: WebsocketProvider
   isChild?: boolean
+  setCurrentBlock: React.Dispatch<React.SetStateAction<Block | null>>
+  scrollToElement: (elem: HTMLElement | null) => void
+  currentUserIsCoreMember: boolean
 }
 export const BlockView = ({
   block,
@@ -22,6 +25,9 @@ export const BlockView = ({
   canvas,
   realtime,
   isChild,
+  currentUserIsCoreMember,
+  scrollToElement,
+  setCurrentBlock,
 }: ViewProps<Block>) => {
   switch (block.type) {
     case 'container':
@@ -32,6 +38,9 @@ export const BlockView = ({
           isChild={isChild}
           canvas={canvas}
           realtime={realtime}
+          setCurrentBlock={setCurrentBlock}
+          scrollToElement={scrollToElement}
+          currentUserIsCoreMember={currentUserIsCoreMember}
         />
       )
     case 'embed':
@@ -42,6 +51,9 @@ export const BlockView = ({
           isChild={isChild}
           canvas={canvas}
           realtime={realtime}
+          setCurrentBlock={setCurrentBlock}
+          scrollToElement={scrollToElement}
+          currentUserIsCoreMember={currentUserIsCoreMember}
         />
       )
     case 'markdown':
@@ -52,6 +64,9 @@ export const BlockView = ({
           isChild={isChild}
           canvas={canvas}
           realtime={realtime}
+          setCurrentBlock={setCurrentBlock}
+          scrollToElement={scrollToElement}
+          currentUserIsCoreMember={currentUserIsCoreMember}
         />
       )
     case 'table':
@@ -62,6 +77,9 @@ export const BlockView = ({
           isChild={isChild}
           canvas={canvas}
           realtime={realtime}
+          setCurrentBlock={setCurrentBlock}
+          scrollToElement={scrollToElement}
+          currentUserIsCoreMember={currentUserIsCoreMember}
         />
       )
     case 'github.issue':
@@ -72,6 +90,9 @@ export const BlockView = ({
           isChild={isChild}
           canvas={canvas}
           realtime={realtime}
+          setCurrentBlock={setCurrentBlock}
+          scrollToElement={scrollToElement}
+          currentUserIsCoreMember={currentUserIsCoreMember}
         />
       )
     default:
diff --git a/src/cloud/components/ContentManager/index.tsx b/src/cloud/components/ContentManager/index.tsx
index 2d6855d683..6fdc3f6a68 100644
--- a/src/cloud/components/ContentManager/index.tsx
+++ b/src/cloud/components/ContentManager/index.tsx
@@ -31,7 +31,7 @@ import Flexbox from '../../../design/components/atoms/Flexbox'
 import ContentManagerStatusFilter from './ContentManagerStatusFilter'
 import { useCloudDnd } from '../../lib/hooks/sidebar/useCloudDnd'
 import { DraggedTo } from '../../../design/lib/dnd'
-import VerticalScroller from '../../../design/components/atoms/VerticalScroller'
+import Scroller from '../../../design/components/atoms/Scroller'
 import { FormSelectOption } from '../../../design/components/molecules/Form/atoms/FormSelect'
 import Checkbox from '../../../design/components/molecules/Form/atoms/FormCheckbox'
 
@@ -261,7 +261,7 @@ const ContentManager = ({
 
   return (
     <Container>
-      <VerticalScroller className='cm__scroller'>
+      <Scroller className='cm__scroller'>
         <StyledContentManagerHeader>
           {folders != null ? (
             <div className='header__left'>
@@ -391,7 +391,7 @@ const ContentManager = ({
             </>
           )}
         </StyledContentManagerList>
-      </VerticalScroller>
+      </Scroller>
 
       {currentUserIsCoreMember && (
         <ContentManagerToolbar
diff --git a/src/cloud/components/DocPage/DocContextMenuActions.tsx b/src/cloud/components/DocPage/DocContextMenuActions.tsx
index 59f904bcfe..041bf2f4f9 100644
--- a/src/cloud/components/DocPage/DocContextMenuActions.tsx
+++ b/src/cloud/components/DocPage/DocContextMenuActions.tsx
@@ -62,6 +62,7 @@ export interface DocContextMenuActionsProps {
   currentUserIsCoreMember: boolean
   editorRef?: React.MutableRefObject<CodeMirror.Editor | null>
   restoreRevision?: (revision: SerializedRevision) => void
+  isCanvas?: boolean
 }
 
 export function DocContextMenuActions({
@@ -70,6 +71,7 @@ export function DocContextMenuActions({
   currentUserIsCoreMember,
   editorRef,
   restoreRevision,
+  isCanvas,
 }: DocContextMenuActionsProps) {
   const { translate } = useI18n()
   const { sendingMap, toggleDocBookmark, send, updateDoc } = useCloudApi()
@@ -219,7 +221,7 @@ export function DocContextMenuActions({
           },
         }}
       />
-      {currentUserIsCoreMember && (
+      {currentUserIsCoreMember && !isCanvas && (
         <MetadataContainerRow
           row={{
             type: 'button',
@@ -234,35 +236,37 @@ export function DocContextMenuActions({
           }}
         />
       )}
-      <MetadataContainerRow
-        row={{
-          type: 'button',
-          props: {
-            id: 'metadata-history',
-            onClick: revisionNavigateCallback,
-            iconPath: mdiHistory,
-            disabled: subscription == null,
-            label:
-              subscription != null
-                ? subscription.plan === 'standard'
-                  ? translate(lngKeys.SeeLimitedHistory, {
-                      days: revisionHistoryStandardDays,
-                    })
-                  : translate(lngKeys.SeeFullHistory)
-                : translate(lngKeys.History),
-          },
-        }}
-      >
-        {subscription == null ? (
-          <UpgradeIntroButton
-            className='context__badge'
-            origin='revision'
-            variant='secondary'
-            popupVariant='version-history'
-            query={{ teamId: team.id, docId: doc.id }}
-          />
-        ) : null}
-      </MetadataContainerRow>
+      {!isCanvas && (
+        <MetadataContainerRow
+          row={{
+            type: 'button',
+            props: {
+              id: 'metadata-history',
+              onClick: revisionNavigateCallback,
+              iconPath: mdiHistory,
+              disabled: subscription == null,
+              label:
+                subscription != null
+                  ? subscription.plan === 'standard'
+                    ? translate(lngKeys.SeeLimitedHistory, {
+                        days: revisionHistoryStandardDays,
+                      })
+                    : translate(lngKeys.SeeFullHistory)
+                  : translate(lngKeys.History),
+            },
+          }}
+        >
+          {subscription == null ? (
+            <UpgradeIntroButton
+              className='context__badge'
+              origin='revision'
+              variant='secondary'
+              popupVariant='version-history'
+              query={{ teamId: team.id, docId: doc.id }}
+            />
+          ) : null}
+        </MetadataContainerRow>
+      )}
       <MetadataContainerRow
         row={{
           type: 'button',
@@ -291,40 +295,44 @@ export function DocContextMenuActions({
           }}
         />
       )}
-      <MetadataContainerBreak />
-      <MetadataContainerRow
-        row={{
-          type: 'button',
-          props: {
-            id: 'metadata-export-markdown',
-            label: translate(lngKeys.DocExportMarkdown),
-            iconPath: mdiLanguageMarkdownOutline,
-            onClick: exportAsMarkdown,
-          },
-        }}
-      />
-      <MetadataContainerRow
-        row={{
-          type: 'button',
-          props: {
-            id: 'metadata-export-html',
-            label: translate(lngKeys.DocExportHtml),
-            iconPath: mdiFileCodeOutline,
-            onClick: exportAsHtml,
-          },
-        }}
-      />
-      <MetadataContainerRow
-        row={{
-          type: 'button',
-          props: {
-            id: 'metadata-export-pdf',
-            label: translate(lngKeys.DocExportPdf),
-            iconPath: mdiFilePdfOutline,
-            onClick: exportAsPdf,
-          },
-        }}
-      />
+      {!isCanvas && (
+        <>
+          <MetadataContainerBreak />
+          <MetadataContainerRow
+            row={{
+              type: 'button',
+              props: {
+                id: 'metadata-export-markdown',
+                label: translate(lngKeys.DocExportMarkdown),
+                iconPath: mdiLanguageMarkdownOutline,
+                onClick: exportAsMarkdown,
+              },
+            }}
+          />
+          <MetadataContainerRow
+            row={{
+              type: 'button',
+              props: {
+                id: 'metadata-export-html',
+                label: translate(lngKeys.DocExportHtml),
+                iconPath: mdiFileCodeOutline,
+                onClick: exportAsHtml,
+              },
+            }}
+          />
+          <MetadataContainerRow
+            row={{
+              type: 'button',
+              props: {
+                id: 'metadata-export-pdf',
+                label: translate(lngKeys.DocExportPdf),
+                iconPath: mdiFilePdfOutline,
+                onClick: exportAsPdf,
+              },
+            }}
+          />
+        </>
+      )}
       {currentUserIsCoreMember && (
         <>
           <MetadataContainerBreak />
diff --git a/src/cloud/components/DocPage/EditorLayout.tsx b/src/cloud/components/DocPage/EditorLayout.tsx
index 738f9327c6..3254573e63 100644
--- a/src/cloud/components/DocPage/EditorLayout.tsx
+++ b/src/cloud/components/DocPage/EditorLayout.tsx
@@ -4,7 +4,7 @@ import { SerializedDocWithBookmark } from '../../interfaces/db/doc'
 import DocPageHeader from './DocPageHeader'
 import cc from 'classcat'
 import { SerializedTeam } from '../../interfaces/db/team'
-import VerticalScroller from '../../../design/components/atoms/VerticalScroller'
+import Scroller from '../../../design/components/atoms/Scroller'
 
 interface EditorLayoutProps {
   docIsEditable: boolean
@@ -25,7 +25,7 @@ const EditorLayout = ({
       <Container
         className={cc(['editor__layout', 'editor__layout--minimized'])}
       >
-        <VerticalScroller className='editor__layout__scroll'>
+        <Scroller className='editor__layout__scroll'>
           <DocPageHeader
             className='editor__layout__header'
             docIsEditable={docIsEditable}
@@ -33,7 +33,7 @@ const EditorLayout = ({
             team={team}
           />
           <div className='editor__layout__content'>{children}</div>
-        </VerticalScroller>
+        </Scroller>
       </Container>
     )
   }
diff --git a/src/cloud/components/DocPage/NewDocContextMenu.tsx b/src/cloud/components/DocPage/NewDocContextMenu.tsx
index ce6ef4533a..102aaf7dd0 100644
--- a/src/cloud/components/DocPage/NewDocContextMenu.tsx
+++ b/src/cloud/components/DocPage/NewDocContextMenu.tsx
@@ -28,24 +28,26 @@ import DocContextMenuActions from './DocContextMenuActions'
 
 interface DocContextMenuProps {
   currentDoc: SerializedDocWithBookmark
-  contributors: SerializedUser[]
-  backLinks: SerializedDoc[]
+  contributors?: SerializedUser[]
+  backLinks?: SerializedDoc[]
   team: SerializedTeam
   permissions: SerializedUserTeamPermissions[]
   currentUserIsCoreMember: boolean
   editorRef?: React.MutableRefObject<CodeMirror.Editor | null>
   restoreRevision?: (revision: SerializedRevision) => void
+  isCanvas?: boolean
 }
 
 const DocContextMenu = ({
   team,
   currentDoc: doc,
-  contributors,
-  backLinks,
+  contributors = [],
+  backLinks = [],
   permissions,
   currentUserIsCoreMember,
   editorRef,
   restoreRevision,
+  isCanvas,
 }: DocContextMenuProps) => {
   const [sliceContributors, setSliceContributors] = useState(true)
   const { docsMap } = useNav()
@@ -175,39 +177,40 @@ const DocContextMenu = ({
           ),
         }}
       />
-      <MetadataContainerRow
-        row={{
-          label: translate(lngKeys.Contributors),
-          type: 'content',
-          icon: mdiAccountMultiple,
-          content: (
-            <Flexbox wrap='wrap'>
-              {contributorsState.contributors.map((contributor) => (
-                <UserIcon
-                  key={contributor.id}
-                  user={usersMap.get(contributor.id) || contributor}
-                  className='subtle'
-                />
-              ))}
-
-              {contributors.length > 0 && (
-                <>
-                  <div style={{ marginRight: 5 }} />
-                  <Button
-                    size='sm'
-                    variant='transparent'
-                    onClick={() => setSliceContributors((prev) => !prev)}
-                  >
-                    {contributorsState.sliced > 0
-                      ? `+${contributorsState.sliced}`
-                      : '-'}
-                  </Button>
-                </>
-              )}
-            </Flexbox>
-          ),
-        }}
-      />
+      {!isCanvas && (
+        <MetadataContainerRow
+          row={{
+            label: translate(lngKeys.Contributors),
+            type: 'content',
+            icon: mdiAccountMultiple,
+            content: (
+              <Flexbox wrap='wrap'>
+                {contributorsState.contributors.map((contributor) => (
+                  <UserIcon
+                    key={contributor.id}
+                    user={usersMap.get(contributor.id) || contributor}
+                    className='subtle'
+                  />
+                ))}
+                {contributors.length > 0 && (
+                  <>
+                    <div style={{ marginRight: 5 }} />
+                    <Button
+                      size='sm'
+                      variant='transparent'
+                      onClick={() => setSliceContributors((prev) => !prev)}
+                    >
+                      {contributorsState.sliced > 0
+                        ? `+${contributorsState.sliced}`
+                        : '-'}
+                    </Button>
+                  </>
+                )}
+              </Flexbox>
+            ),
+          }}
+        />
+      )}
       <BackLinksList team={team} docs={backLinks} />
       <MetadataContainerBreak />
       <DocContextMenuActions
@@ -216,6 +219,7 @@ const DocContextMenu = ({
         editorRef={editorRef}
         currentUserIsCoreMember={currentUserIsCoreMember}
         restoreRevision={restoreRevision}
+        isCanvas={isCanvas}
       />
     </MetadataContainer>
   )
diff --git a/src/cloud/components/DocPage/index.tsx b/src/cloud/components/DocPage/index.tsx
index 123d4e76c6..5407fe8df8 100644
--- a/src/cloud/components/DocPage/index.tsx
+++ b/src/cloud/components/DocPage/index.tsx
@@ -171,10 +171,10 @@ const DocPage = ({
     )
   }
 
-  return doc.rootBlock == null ? (
+  return currentDoc.rootBlock == null ? (
     <Editor
       team={team}
-      doc={doc}
+      doc={currentDoc}
       user={currentUser}
       contributors={contributors}
       backLinks={backLinks}
@@ -182,7 +182,7 @@ const DocPage = ({
       docIsEditable={docIsEditable}
     />
   ) : (
-    <BlockEditor doc={doc} />
+    <BlockEditor doc={currentDoc as any} team={team} />
   )
 }
 
diff --git a/src/cloud/components/Modal/contents/Doc/RevisionsModal/RevisionModalDetail.tsx b/src/cloud/components/Modal/contents/Doc/RevisionsModal/RevisionModalDetail.tsx
index 17bff1e6de..ed85f55bf5 100644
--- a/src/cloud/components/Modal/contents/Doc/RevisionsModal/RevisionModalDetail.tsx
+++ b/src/cloud/components/Modal/contents/Doc/RevisionsModal/RevisionModalDetail.tsx
@@ -6,7 +6,7 @@ import styled from '../../../../../../design/lib/styled'
 import { useSettings } from '../../../../../lib/stores/settings'
 import Flexbox from '../../../../../../design/components/atoms/Flexbox'
 import CodeMirrorEditor from '../../../../../lib/editor/components/CodeMirrorEditor'
-import VerticalScroller from '../../../../../../design/components/atoms/VerticalScroller'
+import Scroller from '../../../../../../design/components/atoms/Scroller'
 import cc from 'classcat'
 
 interface RevisionModalDetailProps {
@@ -92,14 +92,14 @@ const RevisionModalDetail = ({
           }}
         />
       ) : (
-        <VerticalScroller className='codemirror__scroller'>
+        <Scroller className='codemirror__scroller'>
           <CodeMirrorEditor
             config={{
               ...editorConfig,
               value: rev.content,
             }}
           />
-        </VerticalScroller>
+        </Scroller>
       )}
     </Container>
   )
diff --git a/src/cloud/components/Modal/contents/Doc/RevisionsModal/RevisionModalNavigator.tsx b/src/cloud/components/Modal/contents/Doc/RevisionsModal/RevisionModalNavigator.tsx
index 61649a868d..944c29d591 100644
--- a/src/cloud/components/Modal/contents/Doc/RevisionsModal/RevisionModalNavigator.tsx
+++ b/src/cloud/components/Modal/contents/Doc/RevisionsModal/RevisionModalNavigator.tsx
@@ -12,7 +12,7 @@ import {
 import { focusFirstChildFromElement } from '../../../../../../design/lib/dom'
 import Spinner from '../../../../../../design/components/atoms/Spinner'
 import plur from 'plur'
-import VerticalScroller from '../../../../../../design/components/atoms/VerticalScroller'
+import Scroller from '../../../../../../design/components/atoms/Scroller'
 import NavigationItem from '../../../../../../design/components/molecules/Navigation/NavigationItem'
 import Flexbox from '../../../../../../design/components/atoms/Flexbox'
 import { format } from 'date-fns'
@@ -76,7 +76,7 @@ const RevisionModalNavigator = React.forwardRef<
           </div>
         </header>
 
-        <VerticalScroller className='revisions__scroller'>
+        <Scroller className='revisions__scroller'>
           {revisions.map((rev) => (
             <NavigationItem
               key={rev.id}
@@ -101,7 +101,7 @@ const RevisionModalNavigator = React.forwardRef<
               }}
             />
           ))}
-        </VerticalScroller>
+        </Scroller>
         {currentPage < totalPages && (
           <Button
             variant='secondary'
diff --git a/src/cloud/components/Onboarding/OnboardingLayout.tsx b/src/cloud/components/Onboarding/OnboardingLayout.tsx
index 923ed5e9f8..af784e210a 100644
--- a/src/cloud/components/Onboarding/OnboardingLayout.tsx
+++ b/src/cloud/components/Onboarding/OnboardingLayout.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from '../../../design/lib/styled'
 import { AppComponent } from '../../../design/lib/types'
 import cc from 'classcat'
-import VerticalScroller from '../../../design/components/atoms/VerticalScroller'
+import Scroller from '../../../design/components/atoms/Scroller'
 
 interface OnboardingLayoutProps {
   title: string
@@ -21,13 +21,13 @@ const OnboardingLayout: AppComponent<OnboardingLayoutProps> = ({
     className={cc(['onboarding', className])}
     contentWidth={contentWidth}
   >
-    <VerticalScroller className='onboarding__scroller'>
+    <Scroller className='onboarding__scroller'>
       <div className='onboarding__page'>
         <h1>{title}</h1>
         <p>{subtitle}</p>
         <div className='onboarding__content'>{children}</div>
       </div>
-    </VerticalScroller>
+    </Scroller>
   </Container>
 )
 
diff --git a/src/cloud/lib/blocks/dom.ts b/src/cloud/lib/blocks/dom.ts
new file mode 100644
index 0000000000..d7a9fb4222
--- /dev/null
+++ b/src/cloud/lib/blocks/dom.ts
@@ -0,0 +1,5 @@
+import { Block } from '../../api/blocks'
+
+export function getBlockDomId(block: Block) {
+  return `${block.id}--block-${block.type}`
+}
diff --git a/src/cloud/lib/blocks/props.ts b/src/cloud/lib/blocks/props.ts
index 841cae251c..eb4f2fea00 100644
--- a/src/cloud/lib/blocks/props.ts
+++ b/src/cloud/lib/blocks/props.ts
@@ -8,6 +8,7 @@ const PROP_TYPES = [
 ] as const
 
 export type PropType = typeof PROP_TYPES[number]
+// eslint-disable-next-line prettier/prettier
 export type PropKey = `${string}:${PropType}`
 
 export function isPropKey(k: any): k is PropKey {
diff --git a/src/cloud/lib/blocks/table.ts b/src/cloud/lib/blocks/table.ts
index e9f3c2dc25..a96be2630b 100644
--- a/src/cloud/lib/blocks/table.ts
+++ b/src/cloud/lib/blocks/table.ts
@@ -7,8 +7,18 @@ import {
   PropKey,
   PropType,
 } from './props'
-
+import {
+  mdiAccountCircleOutline,
+  mdiCalendarOutline,
+  mdiCheckboxMarkedOutline,
+  mdiGithub,
+  mdiLink,
+  mdiText,
+} from '@mdi/js'
+
+// eslint-disable-next-line prettier/prettier
 type DataPropCol = `prop:${string}:${string}`
+
 export type Column = PropKey | DataPropCol
 
 export type YTable = YMap<YArray<string> | YMap<string>>
@@ -211,3 +221,27 @@ export function getDataPropColProp(col: DataPropCol): string {
 function notIn<T>(set: Set<T>) {
   return (item: T) => !set.has(item)
 }
+
+function getColType(col: Column): 'prop' | PropType {
+  return isDataPropCol(col) ? 'prop' : col.split(':')[1] as PropType
+}
+
+export function getDataColumnIcon(col: Column) { 
+  const type = getColType(col)
+  switch (type) {
+    case 'prop':
+      return mdiGithub
+    case 'date':
+      return mdiCalendarOutline
+    case 'user':
+      return mdiAccountCircleOutline
+    case 'url':
+      return mdiLink
+    case 'checkbox':
+      return mdiCheckboxMarkedOutline
+    case 'text':
+    case 'number':
+    default:
+      return mdiText
+  }
+}
diff --git a/src/cloud/lib/hooks/useBlockTable.ts b/src/cloud/lib/hooks/useBlockTable.ts
index 66d71f8b74..58d1229f43 100644
--- a/src/cloud/lib/hooks/useBlockTable.ts
+++ b/src/cloud/lib/hooks/useBlockTable.ts
@@ -25,7 +25,7 @@ export interface Actions {
   setCell: (row: string, col: Column, data: string) => void
 }
 
-interface State {
+export interface BlockState {
   columns: Column[]
   rowData: Map<string, Record<Column, string>>
 }
@@ -40,7 +40,7 @@ export function useBlockTable(block: TableBlock, ydoc: YDoc) {
   const actions = useMemo(() => {
     return buildActions(ytable, yrows)
   }, [ytable, yrows])
-  const [state, setState] = useState<State>(() => {
+  const [state, setState] = useState<BlockState>(() => {
     const rowData = Array.from(yrows).map<[string, Record<string, string>]>(
       ([id, map]) => [id, ymapToPropMap(map)]
     )
diff --git a/src/cloud/lib/hooks/useDocBlocks.ts b/src/cloud/lib/hooks/useDocBlocks.ts
index f94279aba4..e6723b0adc 100644
--- a/src/cloud/lib/hooks/useDocBlocks.ts
+++ b/src/cloud/lib/hooks/useDocBlocks.ts
@@ -1,12 +1,16 @@
 import { useBlocks } from '../stores/blocks'
 import { useEffect, useState, useMemo } from 'react'
-import { Block } from '../../api/blocks'
+import {
+  Block,
+  BlockCreateRequestBody,
+  BlockUpdateRequestBody,
+} from '../../api/blocks'
 
 type BlockState = { type: 'loading' } | { type: 'loaded'; block: Block }
 
 export interface BlockActions {
-  create: (block: Omit<Block, 'id'>, parent: Block) => Promise<Block>
-  update: (block: Block) => Promise<Block>
+  create: (block: BlockCreateRequestBody, parent: Block) => Promise<Block>
+  update: (block: BlockUpdateRequestBody) => Promise<Block>
   remove: (block: Block) => Promise<void>
 }
 
diff --git a/src/cloud/lib/i18n/fr.ts b/src/cloud/lib/i18n/fr.ts
index 777941d8df..ff40f5a581 100644
--- a/src/cloud/lib/i18n/fr.ts
+++ b/src/cloud/lib/i18n/fr.ts
@@ -488,6 +488,7 @@ const frTranslation: TranslationSource = {
   [lngKeys.OnboardingFolderSectionDisclaimer]:
     'Invitez vos coéquipiers dans cet espace',
   [lngKeys.GeneralContent]: 'Contenu',
+  [lngKeys.CreateNewCanvas]: 'Créer un nouveau Canvas (beta)',
 }
 
 export default {
diff --git a/src/cloud/lib/i18n/ja.ts b/src/cloud/lib/i18n/ja.ts
index c1b57e31c8..8d26788080 100644
--- a/src/cloud/lib/i18n/ja.ts
+++ b/src/cloud/lib/i18n/ja.ts
@@ -485,6 +485,7 @@ const jpTranslation: TranslationSource = {
   [lngKeys.OnboardingFolderSectionDisclaimer]:
     'Invite your teammates to this space',
   [lngKeys.GeneralContent]: 'Content',
+  [lngKeys.CreateNewCanvas]: 'Create new canvas (beta)',
 }
 
 export default {
diff --git a/src/cloud/lib/i18n/zhCN.ts b/src/cloud/lib/i18n/zhCN.ts
index 7f2b66aaa5..83d1f45cbd 100644
--- a/src/cloud/lib/i18n/zhCN.ts
+++ b/src/cloud/lib/i18n/zhCN.ts
@@ -461,6 +461,7 @@ const zhTranslation: TranslationSource = {
   [lngKeys.OnboardingFolderSectionDisclaimer]:
     'Invite your teammates to this space',
   [lngKeys.GeneralContent]: 'Content',
+  [lngKeys.CreateNewCanvas]: 'Create new canvas (beta)',
 }
 
 export default {
diff --git a/src/cloud/lib/stores/blocks/index.ts b/src/cloud/lib/stores/blocks/index.ts
index 12d74712c4..4e15e619e8 100644
--- a/src/cloud/lib/stores/blocks/index.ts
+++ b/src/cloud/lib/stores/blocks/index.ts
@@ -6,6 +6,8 @@ import {
   deleteBlock,
   updateBlock,
   createBlock,
+  BlockUpdateRequestBody,
+  BlockCreateRequestBody,
 } from '../../../api/blocks'
 import { useToast } from '../../../../design/lib/stores/toast'
 
@@ -53,7 +55,7 @@ function useBlocksStore() {
   )
 
   const create = useCallback(
-    async (body: Omit<Block, 'id'>, parent: Block, root: string) => {
+    async (body: BlockCreateRequestBody, parent: Block, root: string) => {
       const block = await createBlock(body, parent.id)
       await getBlocks(root)
       return block
@@ -70,7 +72,7 @@ function useBlocksStore() {
   )
 
   const update = useCallback(
-    async (block: Block, root: string) => {
+    async (block: BlockUpdateRequestBody, root: string) => {
       const updated = await updateBlock(block)
       await getBlocks(root)
       return updated
diff --git a/src/cloud/lib/stores/sidebarCollapse/store.tsx b/src/cloud/lib/stores/sidebarCollapse/store.tsx
index b7654c5226..29b3921b4c 100644
--- a/src/cloud/lib/stores/sidebarCollapse/store.tsx
+++ b/src/cloud/lib/stores/sidebarCollapse/store.tsx
@@ -14,6 +14,7 @@ const initialContent: CollapsableContent = {
   folders: [],
   workspaces: [],
   links: [],
+  blocks: [],
 }
 
 function useSidebarCollapseStore(): SidebarCollapseContext {
@@ -82,6 +83,10 @@ function useSidebarCollapseStore(): SidebarCollapseContext {
     return new Set(currentTeamCollapsable.links)
   }, [currentTeamCollapsable])
 
+  const sideBarOpenedBlocksIdsSet = useMemo(() => {
+    return new Set(currentTeamCollapsable.blocks)
+  }, [currentTeamCollapsable])
+
   // LOAD FROM LOCAL STORAGE
   useEffect(() => {
     if (team == null) {
@@ -121,6 +126,7 @@ function useSidebarCollapseStore(): SidebarCollapseContext {
     sideBarOpenedFolderIdsSet,
     sideBarOpenedWorkspaceIdsSet,
     sideBarOpenedLinksIdsSet,
+    sideBarOpenedBlocksIdsSet,
     setToLocalStorage,
     toggleItem,
     unfoldItem,
diff --git a/src/cloud/lib/stores/sidebarCollapse/types.ts b/src/cloud/lib/stores/sidebarCollapse/types.ts
index 3b0a2ba953..898130c769 100644
--- a/src/cloud/lib/stores/sidebarCollapse/types.ts
+++ b/src/cloud/lib/stores/sidebarCollapse/types.ts
@@ -1,4 +1,4 @@
-export type CollapsableType = 'folders' | 'workspaces' | 'links'
+export type CollapsableType = 'folders' | 'workspaces' | 'links' | 'blocks'
 export type CollapsableContent = {
   [type in CollapsableType]: string[]
 }
@@ -10,6 +10,7 @@ export interface SidebarCollapseContext {
   sideBarOpenedFolderIdsSet: Set<string>
   sideBarOpenedWorkspaceIdsSet: Set<string>
   sideBarOpenedLinksIdsSet: Set<string>
+  sideBarOpenedBlocksIdsSet: Set<string>
   setToLocalStorage: (teamId: string, content: CollapsableContent) => void
   toggleItem: (type: CollapsableType, id: string) => void
   foldItem: (type: CollapsableType, id: string) => void
diff --git a/src/cloud/lib/utils/blocks.ts b/src/cloud/lib/utils/blocks.ts
new file mode 100644
index 0000000000..253e25890b
--- /dev/null
+++ b/src/cloud/lib/utils/blocks.ts
@@ -0,0 +1,16 @@
+import { compareDateString } from '../../../design/lib/date'
+import { Block } from '../../api/blocks'
+
+export function orderBlockChildren({ children, ...rest }: Block): Block {
+  return {
+    ...rest,
+    children:
+      children != null
+        ? children
+            .sort((a, b) => {
+              return compareDateString(a.createdAt, b.createdAt, 'DESC')
+            })
+            .map((block) => orderBlockChildren(block))
+        : [],
+  } as Block
+}
diff --git a/src/cloud/lib/utils/string.ts b/src/cloud/lib/utils/string.ts
index 60b82f5f63..9a8ea841c7 100644
--- a/src/cloud/lib/utils/string.ts
+++ b/src/cloud/lib/utils/string.ts
@@ -71,18 +71,9 @@ export function stringifyUrl(url: Url): string {
 }
 
 export function isUrlOrPath(str: string): boolean {
-  try {
-    new URL(str)
-    return true
-  } catch {
-    try {
-      str = str.startsWith('/') ? `http://x.yy${str}` : `http://x.yy/${str}`
-      new URL(str)
-      return true
-    } catch {
-      return false
-    }
-  }
+  return /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/\%?#[\]@!\$&'\(\)\*\+,;=.]+$/gim.test(
+    str
+  )
 }
 
 export function isNumberString(str: string) {
diff --git a/src/cloud/pages/cooperate.tsx b/src/cloud/pages/cooperate.tsx
index 540770da53..dd4dc16523 100644
--- a/src/cloud/pages/cooperate.tsx
+++ b/src/cloud/pages/cooperate.tsx
@@ -86,6 +86,7 @@ const CooperatePage = () => {
           ...new Set(initialFolders.map((folder) => folder.workspaceId)),
         ],
         links: [],
+        blocks: [],
       })
 
       if (intent != null) {
diff --git a/src/design/components/atoms/LeftRightList.tsx b/src/design/components/atoms/LeftRightList.tsx
index b444d5b778..e7cb6c885e 100644
--- a/src/design/components/atoms/LeftRightList.tsx
+++ b/src/design/components/atoms/LeftRightList.tsx
@@ -1,13 +1,16 @@
 import React, { useRef } from 'react'
 import { useEffectOnce } from 'react-use'
+import { focusFirstChildFromElement } from '../../../cloud/lib/dom'
 import { useLeftToRightNavigationListener } from '../../lib/keyboard'
 
 interface LeftToRightListProps {
   className?: string
+  ignoreFocus?: boolean
 }
 const LeftToRightList: React.FC<LeftToRightListProps> = ({
   className,
   children,
+  ignoreFocus,
 }) => {
   const listRef = useRef<HTMLDivElement>(null)
   useEffectOnce(() => {
@@ -19,7 +22,21 @@ const LeftToRightList: React.FC<LeftToRightListProps> = ({
   useLeftToRightNavigationListener(listRef)
 
   return (
-    <div ref={listRef} className={className} tabIndex={0}>
+    <div
+      ref={listRef}
+      className={className}
+      onFocus={(event) => {
+        if (ignoreFocus) {
+          return
+        }
+
+        if (event.target === listRef.current) {
+          event.preventDefault()
+          focusFirstChildFromElement(event.target)
+        }
+      }}
+      tabIndex={0}
+    >
       {children}
     </div>
   )
diff --git a/src/design/components/atoms/Link.tsx b/src/design/components/atoms/Link.tsx
index 08dc7b79c2..ac38757ed3 100644
--- a/src/design/components/atoms/Link.tsx
+++ b/src/design/components/atoms/Link.tsx
@@ -5,6 +5,8 @@ import React, {
 } from 'react'
 import styled from '../../lib/styled'
 import cc from 'classcat'
+import Icon from './Icon'
+import { mdiOpenInNew } from '@mdi/js'
 
 export interface HyperLinkProps {
   id?: string
@@ -20,18 +22,17 @@ export interface HyperLinkProps {
   onClick?: MouseEventHandler
 }
 
-export const ExternalLink: React.FC<HyperLinkProps> = ({
-  className,
-  children,
-  ...props
-}) => (
+export const ExternalLink: React.FC<
+  HyperLinkProps & { showIcon?: boolean }
+> = ({ className, children, showIcon, ...props }) => (
   <Container
-    className={cc(['link', className])}
+    className={cc(['link', showIcon && `link--flex`, className])}
     rel='noopener noreferrer'
     target='_blank'
     {...props}
   >
     {children}
+    {showIcon && <Icon size={16} path={mdiOpenInNew} />}
   </Container>
 )
 
@@ -66,4 +67,13 @@ const Container = styled.a`
     color: ${({ theme }) => theme.colors.text.link};
     opacity: 0.8;
   }
+
+  &.link--flex {
+    display: inline-flex;
+    align-items: center;
+    .icon {
+      flex: 0 0 auto;
+      margin-left: ${({ theme }) => theme.sizes.spaces.xsm}px;
+    }
+  }
 `
diff --git a/src/design/components/atoms/RightLeftList.tsx b/src/design/components/atoms/RightLeftList.tsx
new file mode 100644
index 0000000000..7bf276b49a
--- /dev/null
+++ b/src/design/components/atoms/RightLeftList.tsx
@@ -0,0 +1,64 @@
+import React, { useRef } from 'react'
+import { useEffectOnce } from 'react-use'
+import { focusFirstChildFromElement } from '../../lib/dom'
+import { useLeftToRightNavigationListener } from '../../lib/keyboard'
+
+interface LeftRightListProps {
+  className?: string
+  onBlur?: () => void
+  ignoreFocus?: boolean
+}
+const LeftRightList: React.FC<LeftRightListProps> = ({
+  className,
+  children,
+  ignoreFocus,
+  onBlur,
+}) => {
+  const listRef = useRef<HTMLDivElement>(null)
+
+  const onBlurHandler = (event: any) => {
+    if (onBlur == null) {
+      return
+    }
+
+    if (
+      event.relatedTarget == null ||
+      listRef.current == null ||
+      !listRef.current.contains(event.relatedTarget)
+    ) {
+      onBlur()
+      return
+    }
+  }
+
+  useEffectOnce(() => {
+    if (listRef.current != null) {
+      listRef.current.focus()
+    }
+  })
+
+  useLeftToRightNavigationListener(listRef)
+
+  return (
+    <div
+      ref={listRef}
+      className={className}
+      onFocus={(event) => {
+        if (ignoreFocus) {
+          return
+        }
+
+        if (event.target === listRef.current) {
+          event.preventDefault()
+          focusFirstChildFromElement(event.target)
+        }
+      }}
+      onBlur={onBlurHandler}
+      tabIndex={0}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default LeftRightList
diff --git a/src/design/components/atoms/VerticalScroller.tsx b/src/design/components/atoms/Scroller.tsx
similarity index 60%
rename from src/design/components/atoms/VerticalScroller.tsx
rename to src/design/components/atoms/Scroller.tsx
index 0a8c1e425a..532eb67d51 100644
--- a/src/design/components/atoms/VerticalScroller.tsx
+++ b/src/design/components/atoms/Scroller.tsx
@@ -1,23 +1,22 @@
-import React from 'react'
-import { AppComponent } from '../../lib/types'
+import React, { PropsWithChildren } from 'react'
 import cc from 'classcat'
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 
-interface VerticalScrollerProps {
+interface ScrollerProps {
   style?: React.CSSProperties
   onClick?: React.MouseEventHandler
+  className?: string
+  id?: string
+  ref?: React.LegacyRef<OverlayScrollbarsComponent>
   overflowBehavior?: {
     x?: OverlayScrollbars.OverflowBehavior
     y?: OverlayScrollbars.OverflowBehavior
   }
 }
-const VerticalScroller: AppComponent<VerticalScrollerProps> = ({
-  style,
-  children,
-  className,
-  overflowBehavior,
-  onClick,
-}) => {
+const Scroller = React.forwardRef<
+  OverlayScrollbarsComponent,
+  PropsWithChildren<ScrollerProps>
+>(({ style, children, className, overflowBehavior, id, onClick }, ref) => {
   return (
     <OverlayScrollbarsComponent
       className={cc(['vertical__scroller', className])}
@@ -28,12 +27,14 @@ const VerticalScroller: AppComponent<VerticalScrollerProps> = ({
         },
         overflowBehavior,
       }}
+      id={id}
       onClick={onClick}
       style={style}
+      ref={ref}
     >
       {children}
     </OverlayScrollbarsComponent>
   )
-}
+})
 
-export default VerticalScroller
+export default React.memo(Scroller)
diff --git a/src/design/components/molecules/FilterableSelectList.tsx b/src/design/components/molecules/FilterableSelectList.tsx
deleted file mode 100644
index d02fb47da3..0000000000
--- a/src/design/components/molecules/FilterableSelectList.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useState } from 'react'
-import { useI18n } from '../../../cloud/lib/hooks/useI18n'
-import { lngKeys } from '../../../cloud/lib/i18n/types'
-import styled from '../../lib/styled'
-import { AppComponent } from '../../lib/types'
-import VerticalScroller from '../atoms/VerticalScroller'
-import FormInput from './Form/atoms/FormInput'
-import FormRowItem from './Form/templates/FormRowItem'
-
-interface FilterableSelectListProps {
-  items: [string, React.ReactNode][]
-}
-
-const FilterableSelectList: AppComponent<FilterableSelectListProps> = ({
-  items,
-  className,
-}) => {
-  const [filter, setFilter] = useState('')
-  const { translate } = useI18n()
-
-  return (
-    <Container className={className}>
-      <FormRowItem>
-        <FormInput
-          value={filter}
-          onChange={(event) => setFilter(event.target.value)}
-          placeholder={translate(lngKeys.GeneralSearchVerb)}
-          id='selection__input'
-        />
-      </FormRowItem>
-      <VerticalScroller>
-        <ul>
-          {items
-            .filter(([key]) => key.includes(filter))
-            .map(([key, node]) => {
-              return <li key={key}>{node}</li>
-            })}
-        </ul>
-      </VerticalScroller>
-    </Container>
-  )
-}
-
-export default FilterableSelectList
-
-const Container = styled.div`
-  & ul {
-    margin: 0;
-    padding: 0;
-    margin-top: ${({ theme }) => theme.sizes.spaces.df}px;
-    list-style: none;
-    & > li {
-      padding: ${({ theme }) => theme.sizes.spaces.sm}px 0;
-      border-bottom: 1px solid ${({ theme }) => theme.colors.border.second};
-      align-items: center;
-
-      &:first-child {
-        border-top: 1px solid ${({ theme }) => theme.colors.border.second};
-      }
-    }
-  }
-`
diff --git a/src/design/components/molecules/Form/atoms/FormCheckbox.tsx b/src/design/components/molecules/Form/atoms/FormCheckbox.tsx
index cca831059a..d8a7c430bb 100644
--- a/src/design/components/molecules/Form/atoms/FormCheckbox.tsx
+++ b/src/design/components/molecules/Form/atoms/FormCheckbox.tsx
@@ -84,10 +84,17 @@ export const CheckboxWithLabel: AppComponent<CheckboxWithLabelProps> = ({
   toggle,
   ...props
 }) => (
-  <CheckboxWithLabelContainer onClick={toggle}>
+  <CheckboxWithLabelContainer
+    onClick={(ev: React.MouseEvent) => {
+      ev.preventDefault()
+      if (toggle != null) {
+        toggle()
+      }
+    }}
+  >
     <Checkbox {...props} />
     {typeof label === 'string' ? (
-      <span className='form__checkbox__label'></span>
+      <span className='form__checkbox__label'>{label}</span>
     ) : (
       label
     )}
diff --git a/src/design/components/molecules/Form/atoms/FormTextArea.tsx b/src/design/components/molecules/Form/atoms/FormTextArea.tsx
index 4a23ae3df7..81f907556a 100644
--- a/src/design/components/molecules/Form/atoms/FormTextArea.tsx
+++ b/src/design/components/molecules/Form/atoms/FormTextArea.tsx
@@ -2,6 +2,7 @@ import React, {
   ChangeEventHandler,
   MouseEventHandler,
   FocusEventHandler,
+  KeyboardEventHandler,
 } from 'react'
 import cc from 'classcat'
 import styled from '../../../../lib/styled'
@@ -30,6 +31,7 @@ export interface FormTextareaProps {
   onDoubleClick?: MouseEventHandler<HTMLTextAreaElement>
   onContextMenu?: MouseEventHandler<HTMLTextAreaElement>
   onFocus?: FocusEventHandler<HTMLTextAreaElement>
+  onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>
 }
 
 const FormTextarea = React.forwardRef<HTMLTextAreaElement, FormTextareaProps>(
@@ -58,6 +60,7 @@ const FormTextarea = React.forwardRef<HTMLTextAreaElement, FormTextareaProps>(
       onDoubleClick,
       onContextMenu,
       onFocus,
+      onKeyDown,
     },
     ref
   ) => {
@@ -87,6 +90,7 @@ const FormTextarea = React.forwardRef<HTMLTextAreaElement, FormTextareaProps>(
         onDoubleClick={onDoubleClick}
         onContextMenu={onContextMenu}
         onFocus={onFocus}
+        onKeyDown={onKeyDown}
       />
     )
   }
diff --git a/src/design/components/molecules/Navigation/NavigationItem.tsx b/src/design/components/molecules/Navigation/NavigationItem.tsx
index bb69c29a0a..1c8e7b7a30 100644
--- a/src/design/components/molecules/Navigation/NavigationItem.tsx
+++ b/src/design/components/molecules/Navigation/NavigationItem.tsx
@@ -132,7 +132,7 @@ const NavItem: AppComponent<
           )}
           {children}
         </LabelTag>
-        {controls != null && (
+        {controls != null && controls.length > 0 && (
           <div className='navigation__item__controls'>
             {(controls || []).map((control, i) => (
               <Button
diff --git a/src/design/components/molecules/SearchableOptionList.tsx b/src/design/components/molecules/SearchableOptionList.tsx
index a8a77378ba..1a18f6053e 100644
--- a/src/design/components/molecules/SearchableOptionList.tsx
+++ b/src/design/components/molecules/SearchableOptionList.tsx
@@ -7,24 +7,26 @@ import { useI18n } from '../../../cloud/lib/hooks/useI18n'
 import UpDownList from '../atoms/UpDownList'
 import FormRowItem from './Form/templates/FormRowItem'
 import { lngKeys } from '../../../cloud/lib/i18n/types'
-import VerticalScroller from '../atoms/VerticalScroller'
+import Scroller from '../atoms/Scroller'
 import Checkbox from './Form/atoms/FormCheckbox'
 import Button from '../atoms/Button'
 import { overflowEllipsis } from '../../lib/styled/styleFunctions'
 
 export interface SearchableListOption {
   icon?: React.ReactNode
-  label: string
+  label: string | React.ReactNode
   checked?: boolean
   onClick: () => void
 }
 
 export interface SearchableOptionListProps {
+  title?: string
   query: string
   setQuery: React.Dispatch<React.SetStateAction<string>>
   prefix?: string
   options: SearchableListOption[]
-  onSubmit: () => void
+  hideSubmit?: boolean
+  onSubmit?: () => void
   onCancel?: () => void
 }
 
@@ -34,6 +36,7 @@ const SearchableOptionList = React.forwardRef<
 >(
   (
     {
+      title,
       query,
       setQuery,
       className,
@@ -51,10 +54,13 @@ const SearchableOptionList = React.forwardRef<
         className={cc(['searchable__list', prefix, className])}
         prefix={prefix}
       >
+        {title != null && <h3>{title}</h3>}
         <Form
           onSubmit={(event) => {
             event.preventDefault()
-            onSubmit()
+            if (onSubmit != null) {
+              onSubmit()
+            }
           }}
           onCancel={onCancel}
           className='searchable__list__form'
@@ -69,7 +75,7 @@ const SearchableOptionList = React.forwardRef<
                 id='searchable__list__input'
               />
             </FormRowItem>
-            <VerticalScroller className='searchable__list__wrapper'>
+            <Scroller className='searchable__list__wrapper'>
               {options.map((option, i) => {
                 return (
                   <div className='searchable__list__item' key={`${i}`}>
@@ -95,17 +101,19 @@ const SearchableOptionList = React.forwardRef<
                 )
               })}
               {children}
-            </VerticalScroller>
+            </Scroller>
             <div className='searchable__list__break' />
-            <Button
-              type='submit'
-              variant='transparent'
-              className='searchable__list__submit'
-              id='searchable__list__submit'
-              size='sm'
-            >
-              {translate(lngKeys.GeneralSaveVerb)}
-            </Button>
+            {onSubmit != null && (
+              <Button
+                type='submit'
+                variant='transparent'
+                className='searchable__list__submit'
+                id='searchable__list__submit'
+                size='sm'
+              >
+                {translate(lngKeys.GeneralSaveVerb)}
+              </Button>
+            )}
           </UpDownList>
         </Form>
       </SearchableListContainer>
diff --git a/src/design/components/organisms/Dialog/molecules/MessageBoxDialogBody.tsx b/src/design/components/organisms/Dialog/molecules/MessageBoxDialogBody.tsx
index 193ababd0a..660240691e 100644
--- a/src/design/components/organisms/Dialog/molecules/MessageBoxDialogBody.tsx
+++ b/src/design/components/organisms/Dialog/molecules/MessageBoxDialogBody.tsx
@@ -45,7 +45,7 @@ const MessageBoxDialogBody = ({
 
   return (
     <Container onKeyDown={handleBodyKeyDown}>
-      <LeftToRightList>
+      <LeftToRightList ignoreFocus={true}>
         {buttons == null ? (
           <Button variant='secondary' onClick={closeDialog}>
             Close
diff --git a/src/design/components/organisms/FuzzyNavigation/index.tsx b/src/design/components/organisms/FuzzyNavigation/index.tsx
index 505176f521..09a9f2bf03 100644
--- a/src/design/components/organisms/FuzzyNavigation/index.tsx
+++ b/src/design/components/organisms/FuzzyNavigation/index.tsx
@@ -11,7 +11,7 @@ import FuzzyNavigationItem, {
 import Fuse from 'fuse.js'
 import CloseButtonWrapper from '../../molecules/CloseButtonWrapper'
 import cc from 'classcat'
-import VerticalScroller from '../../atoms/VerticalScroller'
+import Scroller from '../../atoms/Scroller'
 
 interface FuzzyNavigationProps {
   recentItems: FuzzyNavigationItemAttrbs[]
@@ -88,7 +88,7 @@ const FuzzyNavigation = ({
             }}
           />
         </CloseButtonWrapper>
-        <VerticalScroller className={cc(['fuzzy__scroller'])}>
+        <Scroller className={cc(['fuzzy__scroller'])}>
           {query === '' ? (
             <>
               <span className='fuzzy__label'>
@@ -121,7 +121,7 @@ const FuzzyNavigation = ({
               ))}
             </>
           )}
-        </VerticalScroller>
+        </Scroller>
       </UpDownList>
     </Container>
   )
diff --git a/src/design/components/organisms/InfoBlock/index.tsx b/src/design/components/organisms/InfoBlock/index.tsx
new file mode 100644
index 0000000000..78c5a6e995
--- /dev/null
+++ b/src/design/components/organisms/InfoBlock/index.tsx
@@ -0,0 +1,143 @@
+import React, { useState } from 'react'
+import { AppComponent } from '../../../lib/types'
+import cc from 'classcat'
+import styled from '../../../lib/styled'
+import Flexbox from '../../atoms/Flexbox'
+import Icon from '../../atoms/Icon'
+import Button from '../../atoms/Button'
+import { mdiArrowLeft, mdiArrowRight } from '@mdi/js'
+
+interface InfoBlockProps {
+  title?: string
+  titleIcon?: string | React.ReactNode
+  rows?: InfoBlockRow[]
+}
+
+const InfoBlock: AppComponent<InfoBlockProps> = ({
+  title,
+  titleIcon,
+  rows = [],
+  className,
+  children,
+}) => {
+  return (
+    <Container className={cc(['info__block', className])}>
+      {(title != null || titleIcon != null) && (
+        <Flexbox alignItems='center' className='info__block__title'>
+          {typeof titleIcon === 'string' ? (
+            <Icon path={titleIcon} size={26} />
+          ) : (
+            titleIcon
+          )}
+          {title != null && <h1>{title}</h1>}
+        </Flexbox>
+      )}
+      {rows.map((row, i) => (
+        <InfoBlockRow key={`${i}-${row.label}`} {...row} />
+      ))}
+      {children}
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  .info__block__title {
+    color: ${({ theme }) => theme.colors.text.primary};
+    .icon {
+      margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
+    }
+  }
+
+  .info__block__row + .info__block__row {
+    margin-top: ${({ theme }) => theme.sizes.spaces.sm}px;
+  }
+`
+
+export default InfoBlock
+
+export interface InfoBlockRow {
+  label?: string
+  labelIcon?: string | React.ReactNode
+  content?: string | React.ReactNode
+  minimized?: boolean
+}
+
+export const InfoBlockRow: AppComponent<InfoBlockRow> = ({
+  label,
+  labelIcon,
+  content,
+  minimized,
+  className,
+  children,
+}) => {
+  const [showContent, setShowContent] = useState(minimized)
+  return (
+    <RowContainer className={cc(['info__block__row', className])}>
+      <Flexbox alignItems='center' className='info__block__row__label'>
+        {labelIcon != null ? (
+          typeof labelIcon === 'string' ? (
+            <Icon path={labelIcon} size={26} />
+          ) : (
+            labelIcon
+          )
+        ) : null}
+        <span>{label}</span>
+      </Flexbox>
+      <div
+        className={cc([
+          'info__block__row__content',
+          showContent != null && 'info__block__row__content--minimized',
+        ])}
+      >
+        {showContent != null && (
+          <Button
+            className='info__block__row__content__toggle'
+            variant='icon'
+            size='sm'
+            iconPath={showContent ? mdiArrowLeft : mdiArrowRight}
+            iconSize={16}
+            onClick={() => setShowContent((prev) => !prev)}
+          />
+        )}
+        {showContent !== false && (
+          <div className='info__block__row__content__wrapper'>
+            {content}
+            {children}
+          </div>
+        )}
+      </div>
+    </RowContainer>
+  )
+}
+
+const RowContainer = styled.div`
+  display: flex;
+  width: 100%;
+  height: fit-content;
+  align-items: center;
+
+  > * {
+    min-height: 20px;
+  }
+
+  .info__block__row__label {
+    width: calc(100% / 4);
+    min-width: 100px;
+    max-width: 200px;
+    flex-direction: row;
+    flex-wrap: wrap;
+    color: ${({ theme }) => theme.colors.text.subtle};
+  }
+
+  .info__block__row__content__toggle {
+    flex: 0 0 auto;
+    margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
+  }
+
+  .info__block__row__content,
+  .info__block__row__content__wrapper {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+  }
+`
diff --git a/src/design/components/organisms/Modal/index.tsx b/src/design/components/organisms/Modal/index.tsx
index a79938ff76..dc6f1a2226 100644
--- a/src/design/components/organisms/Modal/index.tsx
+++ b/src/design/components/organisms/Modal/index.tsx
@@ -6,7 +6,7 @@ import { isActiveElementAnInput } from '../../../lib/dom'
 import { useGlobalKeyDownHandler } from '../../../lib/keyboard'
 import styled from '../../../lib/styled'
 import Button from '../../atoms/Button'
-import VerticalScroller from '../../atoms/VerticalScroller'
+import Scroller from '../../atoms/Scroller'
 import { useWindow } from '../../../lib/stores/window'
 
 const Modal = () => {
@@ -129,7 +129,7 @@ const ContextModalItem = ({
       <div className='modal__window__scroller'>
         <div className='modal__bg__hidden' onClick={closeModal}></div>
         <div className='modal__window__anchor' />
-        <VerticalScroller
+        <Scroller
           className={cc([
             'modal__window',
             `modal__window__width--${modal.width}`,
@@ -145,7 +145,7 @@ const ContextModalItem = ({
             )}
             <div className='modal__content'>{modal.content}</div>
           </div>
-        </VerticalScroller>
+        </Scroller>
       </div>
     </>
   )
@@ -175,7 +175,7 @@ const ModalItem = ({
   )
 
   return (
-    <VerticalScroller
+    <Scroller
       className='modal__window__scroller'
       onClick={onScrollClickHandler}
     >
@@ -204,7 +204,7 @@ const ModalItem = ({
           <div className='modal__content'>{modal.content}</div>
         </div>
       </div>
-    </VerticalScroller>
+    </Scroller>
   )
 }
 
diff --git a/src/design/components/organisms/SearchLayout/index.tsx b/src/design/components/organisms/SearchLayout/index.tsx
index 807497cf92..b8b0a02c7d 100644
--- a/src/design/components/organisms/SearchLayout/index.tsx
+++ b/src/design/components/organisms/SearchLayout/index.tsx
@@ -12,7 +12,7 @@ import { overflowEllipsis } from '../../../lib/styled/styleFunctions'
 import FormInput from '../../molecules/Form/atoms/FormInput'
 import { mdiMagnify } from '@mdi/js'
 import Icon from '../../atoms/Icon'
-import VerticalScroller from '../../atoms/VerticalScroller'
+import Scroller from '../../atoms/Scroller'
 
 interface SearchLayoutProps {
   searchPlaceholder: string
@@ -115,7 +115,7 @@ const SearchLayout = ({
             />
           </CloseButtonWrapper>
         </div>
-        <VerticalScroller className='sidebar__search__results'>
+        <Scroller className='sidebar__search__results'>
           <div className='sidebar__search__results__wrapper'>
             {searchQuery.trim() === '' && (
               <>
@@ -340,7 +340,7 @@ const SearchLayout = ({
                 </>
               )}
           </div>
-        </VerticalScroller>
+        </Scroller>
       </UpDownList>
     </Container>
   )
diff --git a/src/design/components/organisms/Sidebar/index.tsx b/src/design/components/organisms/Sidebar/index.tsx
index fce70ac7b9..763af72a61 100644
--- a/src/design/components/organisms/Sidebar/index.tsx
+++ b/src/design/components/organisms/Sidebar/index.tsx
@@ -17,7 +17,7 @@ import SidebarTree, { SidebarNavCategory } from './molecules/SidebarTree'
 import SidebarPopOver from './atoms/SidebarPopOver'
 import SidebarSpaces, { SidebarSpaceProps } from './molecules/SidebarSpaces'
 import SidebarContextList from './atoms/SidebarContextList'
-import VerticalScroller from '../../atoms/VerticalScroller'
+import Scroller from '../../atoms/Scroller'
 
 export type PopOverState = null | 'spaces' | 'notifications'
 
@@ -79,14 +79,14 @@ const Sidebar = ({
       >
         <SidebarContextList className='sidebar--expanded__wrapper'>
           <div className='sidebar--expanded__wrapper__header'>{header}</div>
-          <VerticalScroller className='sidebar--expanded__wrapper__content'>
+          <Scroller className='sidebar--expanded__wrapper__content'>
             {tree == null ? (
               <Spinner className='sidebar__loader' />
             ) : (
               <SidebarTree tree={tree} />
             )}
             {treeBottomRows}
-          </VerticalScroller>
+          </Scroller>
         </SidebarContextList>
       </WidthEnlarger>
     </SidebarContainer>
diff --git a/src/design/components/organisms/Table/index.tsx b/src/design/components/organisms/Table/index.tsx
new file mode 100644
index 0000000000..3f7340ab26
--- /dev/null
+++ b/src/design/components/organisms/Table/index.tsx
@@ -0,0 +1,189 @@
+import React from 'react'
+import styled from '../../../lib/styled'
+import cc from 'classcat'
+
+import { AppComponent } from '../../../lib/types'
+import { generateId } from '../../../../lib/string'
+import Scroller from '../../atoms/Scroller'
+
+interface TableProps {
+  bordered?: boolean
+  type?: 'transparent' | 'striped'
+  rows?: TableRowProps[]
+  scroll: 'all' | 'after-first-col'
+}
+
+const Table: AppComponent<TableProps> = ({
+  className,
+  children,
+  bordered = true,
+  type = 'transparent',
+  rows = [],
+}) => {
+  const tableId = generateId()
+  return (
+    <TableContainer
+      id={tableId}
+      className={cc([
+        'table',
+        `table--${type}`,
+        bordered && 'table--bordered',
+        className,
+      ])}
+    >
+      <Scroller className='table__wrapper'>
+        {rows.map((row, i) => (
+          <TableRow {...row} key={`${tableId}-row-${i}`} />
+        ))}
+        {children}
+      </Scroller>
+    </TableContainer>
+  )
+}
+
+interface TableRowProps {
+  isHeaderRow?: boolean
+}
+
+export const TableRow = () => <div className='table__row' />
+
+interface TableCellProps {
+  isHeaderCell?: boolean
+  onClick?: () => void
+}
+
+export const TableCell = (_props: TableCellProps) => (
+  <div className='table__cell' />
+)
+
+export default Table
+
+const TableContainer = styled.div`
+  display: block;
+  width: 100%;
+  position: relative;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .table__row {
+    display: flex;
+    flex-flow: row wrap;
+    border-left: solid 1px ${({ theme }) => theme.colors.border.main};
+    transition: 0.5s;
+
+    &.table__row--header {
+      border-top: solid 1px ${({ theme }) => theme.colors.border.main};
+      border-left: solid 1px ${({ theme }) => theme.colors.border.main};
+
+      .table__cell {
+        background: $table-header;
+        color: white;
+        border-color: $table-header-border;
+      }
+    }
+
+    &.table__row--body:nth-child(odd) .table__cell {
+      background: $row-bg;
+    }
+    &:hover {
+      background: #f5f5f5;
+      transition: 500ms;
+    }
+  }
+
+  .table__cell {
+    width: calc(100% / 4);
+    text-align: center;
+    padding: 0.5em 0.5em;
+    border-right: solid 1px ${({ theme }) => theme.colors.border.main};
+    border-bottom: solid 1px ${({ theme }) => theme.colors.border.main};
+  }
+
+  .rowspan {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    justify-content: center;
+  }
+
+  .column {
+    display: flex;
+    flex-flow: column wrap;
+    width: 75%;
+    padding: 0;
+    .table__cell {
+      display: flex;
+      flex-flow: row wrap;
+      width: 100%;
+      padding: 0;
+      border: 0;
+      border-bottom: solid 1px ${({ theme }) => theme.colors.border.main};
+      &:hover {
+        background: #f5f5f5;
+        transition: 500ms;
+      }
+    }
+  }
+
+  .table__cell__verticals {
+    width: calc(100% / 3);
+    text-align: center;
+    padding: 0.5em 0.5em;
+    border-right: solid 1px ${({ theme }) => theme.colors.border.main};
+    &:last-child {
+    }
+  }
+
+  @media all and (max-width: 767px) {
+    .table__cell {
+      width: calc(100% / 3);
+
+      &.first {
+        width: 100%;
+      }
+    }
+
+    .column {
+      width: 100%;
+    }
+  }
+
+  @media all and (max-width: 430px) {
+    .table__row {
+      .table__cell {
+        border-bottom: 0;
+      }
+      .table__cell:last-of-type {
+        border-bottom: solid 1px ${({ theme }) => theme.colors.border.main};
+      }
+    }
+
+    .header {
+      .table__cell {
+        border-bottom: solid 1px;
+      }
+    }
+
+    .table__cell {
+      width: 100%;
+
+      &.first {
+        width: 100%;
+        border-bottom: solid 1px ${({ theme }) => theme.colors.border.main};
+      }
+    }
+
+    .column {
+      width: 100%;
+      .table__cell {
+        border-bottom: solid 1px ${({ theme }) => theme.colors.border.main};
+      }
+    }
+
+    .table__cell__verticals {
+      width: 100%;
+    }
+  }
+`
diff --git a/src/design/components/organisms/Toolbar/index.tsx b/src/design/components/organisms/Toolbar/index.tsx
new file mode 100644
index 0000000000..b7f45900ed
--- /dev/null
+++ b/src/design/components/organisms/Toolbar/index.tsx
@@ -0,0 +1,82 @@
+import React from 'react'
+import styled from '../../../lib/styled'
+import { AppComponent } from '../../../lib/types'
+import cc from 'classcat'
+import { LoadingButton } from '../../atoms/Button'
+
+export interface ToolbarControlProps {
+  iconPath?: string
+  onClick?: (event: React.MouseEvent) => void
+  disabled?: boolean
+  spinning?: boolean
+  label?: React.ReactNode
+  className?: string
+}
+
+interface ToolbarProps {
+  position?: 'absolute' | 'sticky' | 'fixed'
+  controls?: ToolbarControlProps[]
+}
+
+const Toolbar: AppComponent<ToolbarProps> = ({
+  children,
+  className,
+  controls = [],
+}) => {
+  return (
+    <ToolbarRow className={cc(['toolbar', className])}>
+      <div className='toolbar__wrapper'>
+        {(controls || []).map((control, i) => (
+          <LoadingButton
+            key={`toolbar__tool--${i}`}
+            className={cc(['toolbar__tool', control.className])}
+            variant={'bordered'}
+            iconPath={control.iconPath}
+            onClick={control.onClick}
+            disabled={control.disabled}
+            spinning={control.spinning}
+            iconSize={16}
+          >
+            {control.label}
+          </LoadingButton>
+        ))}
+        {children}
+      </div>
+    </ToolbarRow>
+  )
+}
+
+const ToolbarRow = styled.div`
+  width: fit-content;
+  min-height: 40px;
+  background: ${({ theme }) => theme.colors.background.secondary};
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+  bottom: 6px;
+  border-radius: ${({ theme }) => theme.borders.radius}px;
+  max-width: 96%;
+
+  .toolbar__wrapper {
+    padding: ${({ theme }) => theme.sizes.spaces.sm}px
+      ${({ theme }) => theme.sizes.spaces.df}px 0
+      ${({ theme }) => theme.sizes.spaces.df}px;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    flex: 0 1 auto;
+    flex-wrap: wrap;
+    justify-content: center !important;
+  }
+
+  .toolbar__wrapper > * {
+    margin-bottom: ${({ theme }) => theme.sizes.spaces.sm}px;
+  }
+
+  .toolbar__tool {
+    line-height: ;
+  }
+`
+
+export default Toolbar
diff --git a/src/design/components/templates/ContentLayout.tsx b/src/design/components/templates/ContentLayout.tsx
index a756352b62..126b523770 100644
--- a/src/design/components/templates/ContentLayout.tsx
+++ b/src/design/components/templates/ContentLayout.tsx
@@ -132,6 +132,9 @@ const Container = styled.div`
     .two__pane__left {
       display: flex;
       flex-direction: column;
+      flex: 1 1 auto;
+      width: 100%;
+      height: 100%;
     }
 
     .topbar {
diff --git a/src/design/lib/keyboard.ts b/src/design/lib/keyboard.ts
index 2b468c1ad5..74909b369f 100644
--- a/src/design/lib/keyboard.ts
+++ b/src/design/lib/keyboard.ts
@@ -60,13 +60,13 @@ export const useLeftToRightNavigationListener = (
       }
 
       if (isSingleKeyEvent(event, 'arrowleft')) {
-        navigateToNextFocusableWithin(listRef.current, true)
+        navigateToPreviousFocusableWithin(listRef.current, true)
         preventKeyboardEventPropagation(event)
         return
       }
 
       if (isSingleKeyEvent(event, 'arrowright')) {
-        navigateToPreviousFocusableWithin(listRef.current, true)
+        navigateToNextFocusableWithin(listRef.current, true)
         preventKeyboardEventPropagation(event)
         return
       }
diff --git a/src/design/lib/stores/integrations/index.ts b/src/design/lib/stores/integrations/index.ts
index dfb5f6c223..400bbc5df3 100644
--- a/src/design/lib/stores/integrations/index.ts
+++ b/src/design/lib/stores/integrations/index.ts
@@ -16,7 +16,7 @@ interface Actions {
 }
 
 export type State =
-  | { type: 'initialising'; actions: Actions }
+  | { type: 'initialising' }
   | {
       type: 'working'
       integrations: SerializedTeamIntegration[]

From 7ef50cae34a1e6ef9d171b1801f49ac55e8c12df Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Mon, 6 Sep 2021 00:19:16 +0900
Subject: [PATCH 067/106] fix sidenav

---
 src/cloud/components/Blocks/BlockContent.tsx | 1 +
 src/cloud/components/Blocks/BlockTree.tsx    | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index c416b76fb2..1b9fedc97a 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -190,6 +190,7 @@ const BlockContent = ({ doc }: BlockContentProps) => {
             onSelect={setCurrentBlock}
             onDelete={actions.remove}
             idPrefix='nav'
+            showFoldEvents={true}
           />
         </Scroller>
         <div className='block__editor__nav--actions'>
diff --git a/src/cloud/components/Blocks/BlockTree.tsx b/src/cloud/components/Blocks/BlockTree.tsx
index 630fe5e34f..c523df0060 100644
--- a/src/cloud/components/Blocks/BlockTree.tsx
+++ b/src/cloud/components/Blocks/BlockTree.tsx
@@ -17,6 +17,7 @@ interface BlockTreeProps {
   active?: Block
   depth?: number
   className?: string
+  showFoldEvents?: boolean
 }
 
 const BlockTree = ({
@@ -27,6 +28,7 @@ const BlockTree = ({
   depth,
   active,
   className,
+  showFoldEvents,
 }: BlockTreeProps) => {
   const parentDepth = min(depth || 1, 6)
   return (
@@ -41,8 +43,8 @@ const BlockTree = ({
     >
       <NavigationItem
         className='block__editor__nav--item'
-        folded={root.folded}
-        folding={root.folding}
+        folded={showFoldEvents ? root.folded : undefined}
+        folding={showFoldEvents ? root.folding : undefined}
         id={`${idPrefix}-block-${root.id}`}
         label={blockTitle(root)}
         active={active && root.id === active.id}
@@ -66,6 +68,7 @@ const BlockTree = ({
             onDelete={onDelete}
             active={active}
             depth={parentDepth + 1}
+            showFoldEvents={showFoldEvents}
           />
         ))}
     </StyledBlockTree>

From ab44be64f53385afaabb772790a3c842a6b15f9b Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Mon, 6 Sep 2021 00:34:15 +0900
Subject: [PATCH 068/106] fix switches in col settings

---
 .../Blocks/views/Table/TableSettings.tsx      | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/TableSettings.tsx b/src/cloud/components/Blocks/views/Table/TableSettings.tsx
index 274934bf71..94cde0ebc2 100644
--- a/src/cloud/components/Blocks/views/Table/TableSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/TableSettings.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import Switch from '../../../../../design/components/atoms/Switch'
+import MetadataContainer from '../../../../../design/components/organisms/MetadataContainer'
 import MetadataContainerBreak from '../../../../../design/components/organisms/MetadataContainer/atoms/MetadataContainerBreak'
 import MetadataContainerRow from '../../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
 import styled from '../../../../../design/lib/styled'
@@ -73,30 +74,33 @@ const TableSettings = ({
   )
 
   return (
-    <Container>
-      <MetadataContainerRow row={{ type: 'header', content: 'GITHUB' }} />
-      {GITHUB_PROPS.map((prop) => {
-        return (
-          <MetadataContainerRow
-            key={prop}
-            className='table__settings__toggle'
-            row={{
-              type: 'content',
-              label: prop,
-              content: (
-                <Switch
-                  checked={activeProps.has(prop)}
-                  onChange={() => toggleProp(prop)}
-                />
-              ),
-            }}
-          />
-        )
-      })}
-      <MetadataContainerBreak />
-      <MetadataContainerRow row={{ type: 'header', content: 'PROPERTIES' }} />
-      <DataTypeMenu onSelect={insertColumn} />
-    </Container>
+    <MetadataContainer>
+      <Container>
+        <MetadataContainerRow row={{ type: 'header', content: 'GITHUB' }} />
+        {GITHUB_PROPS.map((prop) => {
+          return (
+            <MetadataContainerRow
+              key={prop}
+              className='table__settings__toggle'
+              row={{
+                type: 'content',
+                label: prop,
+                content: (
+                  <Switch
+                    checked={activeProps.has(prop)}
+                    onChange={() => toggleProp(prop)}
+                    id={`github-prop-${prop}`}
+                  />
+                ),
+              }}
+            />
+          )
+        })}
+        <MetadataContainerBreak />
+        <MetadataContainerRow row={{ type: 'header', content: 'PROPERTIES' }} />
+        <DataTypeMenu onSelect={insertColumn} />
+      </Container>
+    </MetadataContainer>
   )
 }
 

From cc5bf18ab03df9101bda271583ac1eb00c454669 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Mon, 6 Sep 2021 00:48:09 +0900
Subject: [PATCH 069/106] context menu scrolls top by default

---
 .../components/Blocks/props/DataTypeMenu.tsx     |  5 ++---
 .../components/Blocks/views/GithubIssue.tsx      |  5 +++--
 .../Blocks/views/Table/ColumnSettings.tsx        | 16 +++++++++-------
 src/design/components/organisms/Modal/index.tsx  | 13 +++++++++++++
 4 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/cloud/components/Blocks/props/DataTypeMenu.tsx b/src/cloud/components/Blocks/props/DataTypeMenu.tsx
index 699d57328a..11b5297aa3 100644
--- a/src/cloud/components/Blocks/props/DataTypeMenu.tsx
+++ b/src/cloud/components/Blocks/props/DataTypeMenu.tsx
@@ -6,7 +6,6 @@ import {
   mdiText,
 } from '@mdi/js'
 import React from 'react'
-import MetadataContainer from '../../../../design/components/organisms/MetadataContainer'
 import MetadataContainerRow from '../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
 import { PropType } from '../../../lib/blocks/props'
 
@@ -16,7 +15,7 @@ interface DataTypeMenuProps {
 
 const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => {
   return (
-    <MetadataContainer>
+    <>
       <MetadataContainerRow
         row={{
           type: 'button',
@@ -83,7 +82,7 @@ const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => {
           },
         }}
       />
-    </MetadataContainer>
+    </>
   )
 }
 
diff --git a/src/cloud/components/Blocks/views/GithubIssue.tsx b/src/cloud/components/Blocks/views/GithubIssue.tsx
index 22c5b865b7..90ff282e6f 100644
--- a/src/cloud/components/Blocks/views/GithubIssue.tsx
+++ b/src/cloud/components/Blocks/views/GithubIssue.tsx
@@ -30,6 +30,7 @@ import InfoBlock, {
 } from '../../../../design/components/organisms/InfoBlock'
 import BlockLayout from '../BlockLayout'
 import { getTableBlockInputId } from './Table'
+import MetadataContainer from '../../../../design/components/organisms/MetadataContainer'
 
 const GithubIssueView = ({
   block,
@@ -82,14 +83,14 @@ const GithubIssueView = ({
     async (ev) => {
       openContextModal(
         ev,
-        <div>
+        <MetadataContainer>
           <DataTypeMenu
             onSelect={(type) => {
               createPropRef.current(type)
               closeAllModals()
             }}
           />
-        </div>,
+        </MetadataContainer>,
         { alignment: 'top-left' }
       )
     },
diff --git a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
index 071cca690e..0d5eed83a9 100644
--- a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
@@ -69,13 +69,15 @@ const ColumnSettings = ({
       if (isPropKey(colKey)) {
         openContextModal(
           ev,
-          <DataTypeMenu
-            onSelect={(type) => {
-              setColDataType(colKey, type)
-              setColKey(makePropKey(name, type))
-              closeAllModals()
-            }}
-          />,
+          <MetadataContainer>
+            <DataTypeMenu
+              onSelect={(type) => {
+                setColDataType(colKey, type)
+                setColKey(makePropKey(name, type))
+                closeAllModals()
+              }}
+            />
+          </MetadataContainer>,
           { width: 300, keepAll: true }
         )
       }
diff --git a/src/design/components/organisms/Modal/index.tsx b/src/design/components/organisms/Modal/index.tsx
index dc6f1a2226..a1e3868a0b 100644
--- a/src/design/components/organisms/Modal/index.tsx
+++ b/src/design/components/organisms/Modal/index.tsx
@@ -8,6 +8,8 @@ import styled from '../../../lib/styled'
 import Button from '../../atoms/Button'
 import Scroller from '../../atoms/Scroller'
 import { useWindow } from '../../../lib/stores/window'
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
+import { useEffectOnce } from 'react-use'
 
 const Modal = () => {
   const { modals, closeLastModal } = useModal()
@@ -64,6 +66,7 @@ const ContextModalItem = ({
     windowSize: { width: windowWidth, height: windowHeight },
   } = useWindow()
   const modalWidth = typeof modal.width === 'string' ? 400 : modal.width
+  const contentScrollerRef = useRef<OverlayScrollbarsComponent>(null)
 
   const style: CSSProperties | undefined = useMemo(() => {
     const properties: CSSProperties = {
@@ -124,12 +127,22 @@ const ContextModalItem = ({
     modal.maxHeight,
   ])
 
+  useEffectOnce(() => {
+    if (contentScrollerRef.current != null) {
+      const instance = contentScrollerRef.current.osInstance()
+      if (instance != null) {
+        instance.scroll({ top: 0 })
+      }
+    }
+  })
+
   return (
     <>
       <div className='modal__window__scroller'>
         <div className='modal__bg__hidden' onClick={closeModal}></div>
         <div className='modal__window__anchor' />
         <Scroller
+          ref={contentScrollerRef}
           className={cc([
             'modal__window',
             `modal__window__width--${modal.width}`,

From 47eee678fc99aee58cc2b66f488c21704eaed1cc Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Mon, 6 Sep 2021 00:53:35 +0900
Subject: [PATCH 070/106] fix block tree

---
 src/cloud/components/Blocks/BlockTree.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/cloud/components/Blocks/BlockTree.tsx b/src/cloud/components/Blocks/BlockTree.tsx
index c523df0060..19a919ee2e 100644
--- a/src/cloud/components/Blocks/BlockTree.tsx
+++ b/src/cloud/components/Blocks/BlockTree.tsx
@@ -57,7 +57,7 @@ const BlockTree = ({
             : [{ icon: mdiTrashCan, onClick: () => onDelete(root) }]
         }
       />
-      {!root.folded &&
+      {(!showFoldEvents || !root.folded) &&
         root.children.length > 0 &&
         (root.children as Block[]).map((child: Block) => (
           <BlockTree

From 1760acfd032decead7f7e7c40ce32c1c17f52e63 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Mon, 6 Sep 2021 01:00:32 +0900
Subject: [PATCH 071/106] small feedbacks

---
 .../components/Blocks/props/DateProp.tsx      |  2 +-
 .../Blocks/views/Table/ColumnSettings.tsx     | 36 ++++++++++---------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/src/cloud/components/Blocks/props/DateProp.tsx b/src/cloud/components/Blocks/props/DateProp.tsx
index cf703d67ad..dc60d16b82 100644
--- a/src/cloud/components/Blocks/props/DateProp.tsx
+++ b/src/cloud/components/Blocks/props/DateProp.tsx
@@ -82,5 +82,5 @@ const CalendarContainer = ({ children }: { children: any }) => {
 export default DateProp
 
 const Container = styled.div`
-  cursor: pointer;
+  min-width: 180px;
 `
diff --git a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
index 0d5eed83a9..ab2ed7217e 100644
--- a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
@@ -105,24 +105,26 @@ const ColumnSettings = ({
             }
           }}
         />
-        <MetadataContainerRow
-          row={{
-            type: 'header',
-            content: dataType === 'prop' ? 'GITHUB PARAMETER' : 'PROPERTY TYPE',
-          }}
-        />
         {dataType !== 'prop' && (
-          <MetadataContainerRow
-            row={{
-              type: 'button',
-              props: {
-                label: capitalize(dataType),
-                iconPath: mdiAccountCircleOutline,
-                onClick: openTypeSelector,
-                id: 'column-setting-type',
-              },
-            }}
-          />
+          <>
+            <MetadataContainerRow
+              row={{
+                type: 'header',
+                content: 'PROPERTY TYPE',
+              }}
+            />
+            <MetadataContainerRow
+              row={{
+                type: 'button',
+                props: {
+                  label: capitalize(dataType),
+                  iconPath: mdiAccountCircleOutline,
+                  onClick: openTypeSelector,
+                  id: 'column-setting-type',
+                },
+              }}
+            />
+          </>
         )}
         <MetadataContainerBreak />
         <MetadataContainerRow

From 8bc6192d882f8c1b906d0475d2658bca5512dc19 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Mon, 6 Sep 2021 08:55:43 +0900
Subject: [PATCH 072/106] doc share removal

---
 src/cloud/components/Blocks/BlockEditor.tsx | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockEditor.tsx b/src/cloud/components/Blocks/BlockEditor.tsx
index 421b287b9a..84a7880f89 100644
--- a/src/cloud/components/Blocks/BlockEditor.tsx
+++ b/src/cloud/components/Blocks/BlockEditor.tsx
@@ -5,13 +5,10 @@ import { useModal } from '../../../design/lib/stores/modal'
 import { ContainerBlock } from '../../api/blocks'
 import { SerializedDocWithBookmark } from '../../interfaces/db/doc'
 import { SerializedTeam } from '../../interfaces/db/team'
-import { useI18n } from '../../lib/hooks/useI18n'
-import { lngKeys } from '../../lib/i18n/types'
 import { usePage } from '../../lib/stores/pageStore'
 import ApplicationPage from '../ApplicationPage'
 import ApplicationTopbar from '../ApplicationTopbar'
 import InviteCTAButton from '../buttons/InviteCTAButton'
-import DocShare from '../DocPage/DocShare'
 import NewDocContextMenu from '../DocPage/NewDocContextMenu'
 import BlockContent from './BlockContent'
 
@@ -21,7 +18,6 @@ interface BlockEditorProps {
 }
 
 const BlockEditor = ({ doc, team }: BlockEditorProps) => {
-  const { translate } = useI18n()
   const { openContextModal } = useModal()
   const { currentUserIsCoreMember, permissions = [] } = usePage()
   return (
@@ -36,17 +32,6 @@ const BlockEditor = ({ doc, team }: BlockEditorProps) => {
             {
               type: 'separator',
             },
-            {
-              type: 'button',
-              variant: 'secondary',
-              label: translate(lngKeys.Share),
-              onClick: (event) =>
-                openContextModal(
-                  event,
-                  <DocShare currentDoc={doc} team={team} />,
-                  { width: 440, alignment: 'bottom-right' }
-                ),
-            },
             {
               variant: 'icon',
               iconPath: mdiDotsHorizontal,

From aeb702ff439bd91fd181dadb9306f4bbeadd8577 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Mon, 6 Sep 2021 09:48:07 +0900
Subject: [PATCH 073/106] markdown block edit on creation

---
 src/cloud/components/Blocks/BlockContent.tsx  |  3 +++
 .../components/Blocks/views/Container.tsx     |  6 +++++
 .../components/Blocks/views/GithubIssue.tsx   |  6 +++++
 .../components/Blocks/views/Markdown.tsx      | 26 +++++++++++++++++++
 src/cloud/lib/utils/events.ts                 |  8 ++++++
 5 files changed, 49 insertions(+)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index 1b9fedc97a..b4a4725a06 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -30,6 +30,7 @@ import {
   useSidebarCollapse,
 } from '../../lib/stores/sidebarCollapse'
 import { FoldingProps } from '../../../design/components/atoms/FoldingWrapper'
+import { markdownBlockEventEmitter } from '../../lib/utils/events'
 
 export interface Canvas extends SerializedDocWithBookmark {
   rootBlock: ContainerBlock
@@ -84,6 +85,8 @@ const BlockContent = ({ doc }: BlockContentProps) => {
             getTableBlockInputId(newBlock)
           )
           if (titleElement != null) titleElement.focus()
+        } else if (newBlock.type === 'markdown') {
+          markdownBlockEventEmitter.dispatch({ type: 'edit', id: newBlock.id })
         }
       } catch (error) {
         pushApiErrorMessage(error)
diff --git a/src/cloud/components/Blocks/views/Container.tsx b/src/cloud/components/Blocks/views/Container.tsx
index a30a282692..85d5d19e51 100644
--- a/src/cloud/components/Blocks/views/Container.tsx
+++ b/src/cloud/components/Blocks/views/Container.tsx
@@ -14,6 +14,7 @@ import BlockCreationModal from '../BlockCreationModal'
 import BlockToolbar from '../BlockToolbar'
 import BlockLayout from '../BlockLayout'
 import { getTableBlockInputId } from './Table'
+import { markdownBlockEventEmitter } from '../../../lib/utils/events'
 
 interface ContainerViewProps extends ViewProps<ContainerBlock> {
   setCurrentBlock: React.Dispatch<React.SetStateAction<Block | null>>
@@ -44,6 +45,11 @@ const ContainerView = ({
           getTableBlockInputId(createdBlock)
         )
         if (titleElement != null) titleElement.focus()
+      } else if (newBlock.type === 'markdown') {
+        markdownBlockEventEmitter.dispatch({
+          type: 'edit',
+          id: createdBlock.id,
+        })
       }
     },
     [block, actions, closeAllModals, scrollToElement]
diff --git a/src/cloud/components/Blocks/views/GithubIssue.tsx b/src/cloud/components/Blocks/views/GithubIssue.tsx
index 90ff282e6f..158f5fc021 100644
--- a/src/cloud/components/Blocks/views/GithubIssue.tsx
+++ b/src/cloud/components/Blocks/views/GithubIssue.tsx
@@ -31,6 +31,7 @@ import InfoBlock, {
 import BlockLayout from '../BlockLayout'
 import { getTableBlockInputId } from './Table'
 import MetadataContainer from '../../../../design/components/organisms/MetadataContainer'
+import { markdownBlockEventEmitter } from '../../../lib/utils/events'
 
 const GithubIssueView = ({
   block,
@@ -117,6 +118,11 @@ const GithubIssueView = ({
           getTableBlockInputId(createdBlock)
         )
         if (titleElement != null) titleElement.focus()
+      } else if (newBlock.type === 'markdown') {
+        markdownBlockEventEmitter.dispatch({
+          type: 'edit',
+          id: createdBlock.id,
+        })
       }
     },
     [blockActions, block, closeAllModals, scrollToElement]
diff --git a/src/cloud/components/Blocks/views/Markdown.tsx b/src/cloud/components/Blocks/views/Markdown.tsx
index cc6ed25c9c..c6807590f3 100644
--- a/src/cloud/components/Blocks/views/Markdown.tsx
+++ b/src/cloud/components/Blocks/views/Markdown.tsx
@@ -11,6 +11,10 @@ import { mdiEyeOutline, mdiPencil, mdiTrashCanOutline } from '@mdi/js'
 import { getBlockDomId } from '../../../lib/blocks/dom'
 import cc from 'classcat'
 import BlockLayout from '../BlockLayout'
+import {
+  MarkdownBlockEventDetails,
+  markdownBlockEventEmitter,
+} from '../../../lib/utils/events'
 
 const MarkdownView = ({
   block,
@@ -87,6 +91,26 @@ const MarkdownView = ({
     }
   }, [mode])
 
+  useEffect(() => {
+    const handler = ({ detail }: CustomEvent<MarkdownBlockEventDetails>) => {
+      if (detail.id !== block.id) {
+        return
+      }
+
+      switch (detail.type) {
+        case 'edit':
+          setMode('editor')
+          return
+        case 'view':
+          setMode('view')
+        default:
+          return
+      }
+    }
+    markdownBlockEventEmitter.listen(handler)
+    return () => markdownBlockEventEmitter.unlisten(handler)
+  }, [block])
+
   return (
     <BlockLayout
       controls={
@@ -111,6 +135,8 @@ const MarkdownView = ({
             : `block__markdown--mode-${mode}`,
         ])}
         id={getBlockDomId(block)}
+        onEv
+        onFocus={() => setMode('editor')}
       >
         {!synced ? (
           <Spinner />
diff --git a/src/cloud/lib/utils/events.ts b/src/cloud/lib/utils/events.ts
index d7e7191fab..d7f261e102 100644
--- a/src/cloud/lib/utils/events.ts
+++ b/src/cloud/lib/utils/events.ts
@@ -80,3 +80,11 @@ export const toggleSidebarNotificationsEventEmitter = createCustomEventEmitter(
 export const toggleSettingsMembersEventEmitter = createCustomEventEmitter(
   'toggle-settings-members'
 )
+
+export type MarkdownBlockEventDetails = {
+  type: string
+  id: string
+}
+export const markdownBlockEventEmitter = createCustomEventEmitter<
+  MarkdownBlockEventDetails
+>('blocks-markdown')

From 17f24973304760d3d3370608470fded4c2dac4e6 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Mon, 6 Sep 2021 09:51:41 +0900
Subject: [PATCH 074/106] add prop location

---
 .../components/Blocks/views/GithubIssue.tsx   | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/cloud/components/Blocks/views/GithubIssue.tsx b/src/cloud/components/Blocks/views/GithubIssue.tsx
index 158f5fc021..bd594ae06e 100644
--- a/src/cloud/components/Blocks/views/GithubIssue.tsx
+++ b/src/cloud/components/Blocks/views/GithubIssue.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { BlockView, ViewProps } from './'
-import { mdiGithub, mdiPenPlus, mdiPlusBoxOutline } from '@mdi/js'
+import { mdiGithub, mdiPlus, mdiPlusBoxOutline } from '@mdi/js'
 import styled from '../../../../design/lib/styled'
 import Icon from '../../../../design/components/atoms/Icon'
 import { BlockCreateRequestBody, GithubIssueBlock } from '../../../api/blocks'
@@ -32,6 +32,7 @@ import BlockLayout from '../BlockLayout'
 import { getTableBlockInputId } from './Table'
 import MetadataContainer from '../../../../design/components/organisms/MetadataContainer'
 import { markdownBlockEventEmitter } from '../../../lib/utils/events'
+import Button from '../../../../design/components/atoms/Button'
 
 const GithubIssueView = ({
   block,
@@ -92,7 +93,7 @@ const GithubIssueView = ({
             }}
           />
         </MetadataContainer>,
-        { alignment: 'top-left' }
+        { alignment: 'bottom-left' }
       )
     },
     [openContextModal, closeAllModals]
@@ -202,6 +203,16 @@ const GithubIssueView = ({
               </InfoBlockRow>
             )
           })}
+          <div className='info__block__row'>
+            <Button
+              variant='secondary'
+              iconPath={mdiPlus}
+              iconSize={16}
+              onClick={(ev) => openPropAdd(ev)}
+            >
+              Add Prop
+            </Button>
+          </div>
         </InfoBlock>
       </BlockLayout>
       <div className='github-issue__view__children'>
@@ -223,11 +234,6 @@ const GithubIssueView = ({
       </div>
       <BlockToolbar
         controls={[
-          {
-            iconPath: mdiPenPlus,
-            label: 'Add Property',
-            onClick: (ev) => openPropAdd(ev),
-          },
           {
             iconPath: mdiPlusBoxOutline,
             label: 'Add Block',

From faaa054b2c32b5fe406ed314c22a0d043b3be90e Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Mon, 6 Sep 2021 12:47:06 +0900
Subject: [PATCH 075/106] kazz/simon feedback

---
 src/cloud/api/blocks/index.ts                 | 13 +---
 src/cloud/components/Blocks/BlockContent.tsx  | 62 ++++++------------
 .../components/Blocks/BlockCreationModal.tsx  |  2 +-
 src/cloud/components/Blocks/BlockTree.tsx     |  7 +-
 .../Blocks/forms/GithubIssueForm.tsx          |  6 +-
 .../components/Blocks/props/BoostUserProp.tsx |  5 +-
 .../components/Blocks/props/TextProp.tsx      |  4 +-
 .../components/Blocks/views/GithubIssue.tsx   | 29 +++++----
 src/cloud/components/Blocks/views/index.tsx   |  4 ++
 src/cloud/lib/hooks/useBlockTable.ts          |  2 +-
 ...{LeftRightList.tsx => LeftToRightList.tsx} |  0
 src/design/components/atoms/RightLeftList.tsx | 64 -------------------
 .../Dialog/molecules/MessageBoxDialogBody.tsx |  2 +-
 13 files changed, 53 insertions(+), 147 deletions(-)
 rename src/design/components/atoms/{LeftRightList.tsx => LeftToRightList.tsx} (100%)
 delete mode 100644 src/design/components/atoms/RightLeftList.tsx

diff --git a/src/cloud/api/blocks/index.ts b/src/cloud/api/blocks/index.ts
index c8c4bca03c..e45c56091f 100644
--- a/src/cloud/api/blocks/index.ts
+++ b/src/cloud/api/blocks/index.ts
@@ -1,17 +1,6 @@
 import { callApi } from '../../lib/client'
 
-type BlockTypeLabel =
-  | 'markdown'
-  | 'embed'
-  | 'github.issue'
-  | 'table'
-  | 'container'
-
-interface BlockType<
-  T extends BlockTypeLabel,
-  D,
-  C extends BlockType<any, any, any> = never
-> {
+interface BlockType<T, D, C extends BlockType<any, any, any> = never> {
   type: T
   id: string
   name: string
diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index b4a4725a06..347f0e3ec8 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -20,17 +20,14 @@ import Scroller from '../../../design/components/atoms/Scroller'
 import UpDownList from '../../../design/components/atoms/UpDownList'
 import NavigationItem from '../../../design/components/molecules/Navigation/NavigationItem'
 import Flexbox from '../../../design/components/atoms/Flexbox'
-import { getBlockDomId } from '../../lib/blocks/dom'
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 import { useToast } from '../../../design/lib/stores/toast'
 import { usePage } from '../../lib/stores/pageStore'
-import { getTableBlockInputId } from './views/Table'
 import {
   CollapsableType,
   useSidebarCollapse,
 } from '../../lib/stores/sidebarCollapse'
 import { FoldingProps } from '../../../design/components/atoms/FoldingWrapper'
-import { markdownBlockEventEmitter } from '../../lib/utils/events'
 
 export interface Canvas extends SerializedDocWithBookmark {
   rootBlock: ContainerBlock
@@ -70,36 +67,12 @@ const BlockContent = ({ doc }: BlockContentProps) => {
       try {
         const newBlock = await actions.create(block, doc.rootBlock)
         closeAllModals()
-        if (
-          (currentBlock != null && currentBlock.type !== 'container') ||
-          (currentBlock != null && doc.rootBlock.id !== currentBlock.id)
-        ) {
-          setCurrentBlock(newBlock)
-        } else {
-          const blockElem = document.getElementById(getBlockDomId(newBlock))
-          scrollToElement(blockElem)
-        }
-
-        if (newBlock.type === 'table') {
-          const titleElement = document.getElementById(
-            getTableBlockInputId(newBlock)
-          )
-          if (titleElement != null) titleElement.focus()
-        } else if (newBlock.type === 'markdown') {
-          markdownBlockEventEmitter.dispatch({ type: 'edit', id: newBlock.id })
-        }
+        setCurrentBlock(newBlock)
       } catch (error) {
         pushApiErrorMessage(error)
       }
     },
-    [
-      doc,
-      actions,
-      closeAllModals,
-      currentBlock,
-      scrollToElement,
-      pushApiErrorMessage,
-    ]
+    [doc, actions, closeAllModals, pushApiErrorMessage]
   )
 
   useEffect(() => {
@@ -123,7 +96,7 @@ const BlockContent = ({ doc }: BlockContentProps) => {
 
   const createContainer = useCallback(() => {
     return createBlock({
-      name: '',
+      name: 'Page',
       type: 'container',
       children: [],
       data: null,
@@ -172,10 +145,12 @@ const BlockContent = ({ doc }: BlockContentProps) => {
 
   const navTree = useMemo(() => {
     if (state.type === 'loading') {
-      return null
+      return []
     }
 
-    return getFoldedChild(state.block, sideBarOpenedBlocksIdsSet, getFoldEvents)
+    return state.block.children.map((child) =>
+      getFoldedChild(child, sideBarOpenedBlocksIdsSet, getFoldEvents)
+    )
   }, [getFoldEvents, state, sideBarOpenedBlocksIdsSet])
 
   if (state.type === 'loading') {
@@ -187,14 +162,17 @@ const BlockContent = ({ doc }: BlockContentProps) => {
       <div id='block__editor__anchor' />
       <UpDownList ignoreFocus={true} className='block__editor__nav'>
         <Scroller className='block__editor__nav__scroller'>
-          <BlockTree
-            root={navTree != null ? navTree : state.block}
-            active={currentBlock || doc.rootBlock}
-            onSelect={setCurrentBlock}
-            onDelete={actions.remove}
-            idPrefix='nav'
-            showFoldEvents={true}
-          />
+          {navTree.map((child) => (
+            <BlockTree
+              key={`nav-${child.id}`}
+              root={child}
+              active={currentBlock || doc.rootBlock}
+              onSelect={setCurrentBlock}
+              onDelete={actions.remove}
+              idPrefix='nav'
+              showFoldEvents={true}
+            />
+          ))}
         </Scroller>
         <div className='block__editor__nav--actions'>
           <NavigationItem
@@ -217,7 +195,7 @@ const BlockContent = ({ doc }: BlockContentProps) => {
                 depth={1}
                 label={
                   <Flexbox alignItems='center' justifyContent='space-between'>
-                    <span>Container</span>
+                    <span>Page</span>
                     <Icon path={mdiPlus} size={16} />
                   </Flexbox>
                 }
@@ -273,7 +251,7 @@ const BlockContent = ({ doc }: BlockContentProps) => {
           ref={contentScrollerRef}
         >
           <BlockView
-            block={currentBlock || state.block}
+            block={currentBlock || state.block.children[0]}
             actions={actions}
             canvas={doc}
             realtime={provider}
diff --git a/src/cloud/components/Blocks/BlockCreationModal.tsx b/src/cloud/components/Blocks/BlockCreationModal.tsx
index 835560348a..2bf8c7c0a1 100644
--- a/src/cloud/components/Blocks/BlockCreationModal.tsx
+++ b/src/cloud/components/Blocks/BlockCreationModal.tsx
@@ -2,7 +2,7 @@ import { mdiCodeTags, mdiFileDocumentOutline, mdiTable } from '@mdi/js'
 import React from 'react'
 import Button from '../../../design/components/atoms/Button'
 import Icon from '../../../design/components/atoms/Icon'
-import LeftToRightList from '../../../design/components/atoms/LeftRightList'
+import LeftToRightList from '../../../design/components/atoms/LeftToRightList'
 import styled from '../../../design/lib/styled'
 
 interface BlockCreationModalProps {
diff --git a/src/cloud/components/Blocks/BlockTree.tsx b/src/cloud/components/Blocks/BlockTree.tsx
index 19a919ee2e..c7f952e4a4 100644
--- a/src/cloud/components/Blocks/BlockTree.tsx
+++ b/src/cloud/components/Blocks/BlockTree.tsx
@@ -78,13 +78,10 @@ const BlockTree = ({
 function blockTitle(block: Block) {
   switch (block.type) {
     case 'github.issue':
-      try {
-        return `${block.data.title}`
-      } catch (err) {
-        return 'Github Issue'
-      }
+      return block.data?.title || 'Github Issue'
     case 'embed':
     case 'table':
+    case 'container':
       return block.name.trim() === '' ? capitalize(block.type) : block.name
     default:
       return capitalize(block.type)
diff --git a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
index a081914eeb..0d402e5821 100644
--- a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
+++ b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
@@ -343,10 +343,10 @@ const GithubIssueSelector = ({
     }
   }, [issues, filteredIssues.length, selectedIssues.size])
 
-  const toggleIssue = useCallback((issue: Issue, selected: boolean) => {
+  const toggleIssue = useCallback((issue: Issue) => {
     return () => {
       setSelectedIssues((old) => {
-        if (selected) {
+        if (!old.has(issue)) {
           old.add(issue)
         } else {
           old.delete(issue)
@@ -443,7 +443,7 @@ const GithubIssueSelector = ({
                 <td>
                   <CheckboxWithLabel
                     checked={selectedIssues.has(issue)}
-                    toggle={toggleIssue(issue, !selectedIssues.has(issue))}
+                    toggle={toggleIssue(issue)}
                     label={issue.title}
                   />
                 </td>
diff --git a/src/cloud/components/Blocks/props/BoostUserProp.tsx b/src/cloud/components/Blocks/props/BoostUserProp.tsx
index a869432f7f..98ab202755 100644
--- a/src/cloud/components/Blocks/props/BoostUserProp.tsx
+++ b/src/cloud/components/Blocks/props/BoostUserProp.tsx
@@ -12,14 +12,11 @@ import SearchableOptionListPopup from '../../SearchableOptionListPopup'
 import UserIcon from '../../UserIcon'
 import { BlockPropertyProps } from './types'
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface BoostUserPropProps extends BlockPropertyProps {}
-
 const BoostUserProp = ({
   value,
   onUpdate,
   currentUserIsCoreMember,
-}: BoostUserPropProps) => {
+}: BlockPropertyProps) => {
   const { permissions = [] } = usePage()
   const { openContextModal, closeAllModals } = useModal()
   const { translate } = useI18n()
diff --git a/src/cloud/components/Blocks/props/TextProp.tsx b/src/cloud/components/Blocks/props/TextProp.tsx
index d61474bd18..5e17ccb5e2 100644
--- a/src/cloud/components/Blocks/props/TextProp.tsx
+++ b/src/cloud/components/Blocks/props/TextProp.tsx
@@ -97,7 +97,7 @@ const TextProp = ({
         </div>
       )}
       {contextPosition != null && (
-        <TextCellForm
+        <TextPropForm
           contextPosition={{
             left:
               contextPosition.left + formWidth < windowSize.width - 10
@@ -144,7 +144,7 @@ const Container = styled.div`
   }
 `
 
-const TextCellForm = ({
+const TextPropForm = ({
   contextPosition,
   placeholder,
   value,
diff --git a/src/cloud/components/Blocks/views/GithubIssue.tsx b/src/cloud/components/Blocks/views/GithubIssue.tsx
index bd594ae06e..69324a3caf 100644
--- a/src/cloud/components/Blocks/views/GithubIssue.tsx
+++ b/src/cloud/components/Blocks/views/GithubIssue.tsx
@@ -47,14 +47,19 @@ const GithubIssueView = ({
   const { openContextModal, closeAllModals, openModal } = useModal()
 
   const prURL = block.data?.pull_request?.html_url || ''
-  const repoURL = new RegExp(
-    /(^https:\/\/github.com\/(?:([^\/]+)\/)+)(?:(?:issues|pull\/(?:[0-9]+)))$/,
-    'gi'
-  ).exec(block.data.html_url || '')
-  const isIssueURL = new RegExp(
-    /^https:\/\/github.com\/([^\/]+\/)+issues\/([0-9]+)$/,
-    'gi'
-  ).test(block.data.html_url || '')
+  const htmlURLRegexes = useMemo(() => {
+    const url = block.data.html_url || ''
+    return {
+      repoUrl: new RegExp(
+        /(^https:\/\/github.com\/(?:([^\/]+)\/)+)(?:(?:issues|pull\/(?:[0-9]+)))$/,
+        'gi'
+      ).exec(url),
+      isIssueURL: new RegExp(
+        /^https:\/\/github.com\/([^\/]+\/)+issues\/([0-9]+)$/,
+        'gi'
+      ).test(url),
+    }
+  }, [block.data.html_url])
 
   const updateBlock = useCallback(
     async (data: GithubIssueBlock['data']) => {
@@ -161,14 +166,14 @@ const GithubIssueView = ({
           <h1>{block.data.title}</h1>
         </Flexbox>
         <InfoBlock className='github-issue__view__info'>
-          {repoURL != null && (
+          {htmlURLRegexes.repoUrl != null && (
             <InfoBlockRow label='Repository'>
-              <ExternalLink href={repoURL[1]} showIcon={true}>
-                {repoURL[2]}
+              <ExternalLink href={htmlURLRegexes.repoUrl[1]} showIcon={true}>
+                {htmlURLRegexes.repoUrl[2]}
               </ExternalLink>
             </InfoBlockRow>
           )}
-          {isIssueURL && (
+          {htmlURLRegexes.isIssueURL && (
             <InfoBlockRow label='Issue number'>
               <ExternalLink href={block.data.html_url || ''} showIcon={true}>
                 #{block.data.number}
diff --git a/src/cloud/components/Blocks/views/index.tsx b/src/cloud/components/Blocks/views/index.tsx
index f7ff108cb2..84ed58e16a 100644
--- a/src/cloud/components/Blocks/views/index.tsx
+++ b/src/cloud/components/Blocks/views/index.tsx
@@ -29,6 +29,10 @@ export const BlockView = ({
   scrollToElement,
   setCurrentBlock,
 }: ViewProps<Block>) => {
+  if (block == null) {
+    return null
+  }
+
   switch (block.type) {
     case 'container':
       return (
diff --git a/src/cloud/lib/hooks/useBlockTable.ts b/src/cloud/lib/hooks/useBlockTable.ts
index 58d1229f43..8adf14aea9 100644
--- a/src/cloud/lib/hooks/useBlockTable.ts
+++ b/src/cloud/lib/hooks/useBlockTable.ts
@@ -25,7 +25,7 @@ export interface Actions {
   setCell: (row: string, col: Column, data: string) => void
 }
 
-export interface BlockState {
+interface BlockState {
   columns: Column[]
   rowData: Map<string, Record<Column, string>>
 }
diff --git a/src/design/components/atoms/LeftRightList.tsx b/src/design/components/atoms/LeftToRightList.tsx
similarity index 100%
rename from src/design/components/atoms/LeftRightList.tsx
rename to src/design/components/atoms/LeftToRightList.tsx
diff --git a/src/design/components/atoms/RightLeftList.tsx b/src/design/components/atoms/RightLeftList.tsx
deleted file mode 100644
index 7bf276b49a..0000000000
--- a/src/design/components/atoms/RightLeftList.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React, { useRef } from 'react'
-import { useEffectOnce } from 'react-use'
-import { focusFirstChildFromElement } from '../../lib/dom'
-import { useLeftToRightNavigationListener } from '../../lib/keyboard'
-
-interface LeftRightListProps {
-  className?: string
-  onBlur?: () => void
-  ignoreFocus?: boolean
-}
-const LeftRightList: React.FC<LeftRightListProps> = ({
-  className,
-  children,
-  ignoreFocus,
-  onBlur,
-}) => {
-  const listRef = useRef<HTMLDivElement>(null)
-
-  const onBlurHandler = (event: any) => {
-    if (onBlur == null) {
-      return
-    }
-
-    if (
-      event.relatedTarget == null ||
-      listRef.current == null ||
-      !listRef.current.contains(event.relatedTarget)
-    ) {
-      onBlur()
-      return
-    }
-  }
-
-  useEffectOnce(() => {
-    if (listRef.current != null) {
-      listRef.current.focus()
-    }
-  })
-
-  useLeftToRightNavigationListener(listRef)
-
-  return (
-    <div
-      ref={listRef}
-      className={className}
-      onFocus={(event) => {
-        if (ignoreFocus) {
-          return
-        }
-
-        if (event.target === listRef.current) {
-          event.preventDefault()
-          focusFirstChildFromElement(event.target)
-        }
-      }}
-      onBlur={onBlurHandler}
-      tabIndex={0}
-    >
-      {children}
-    </div>
-  )
-}
-
-export default LeftRightList
diff --git a/src/design/components/organisms/Dialog/molecules/MessageBoxDialogBody.tsx b/src/design/components/organisms/Dialog/molecules/MessageBoxDialogBody.tsx
index 660240691e..9144300324 100644
--- a/src/design/components/organisms/Dialog/molecules/MessageBoxDialogBody.tsx
+++ b/src/design/components/organisms/Dialog/molecules/MessageBoxDialogBody.tsx
@@ -3,7 +3,7 @@ import { useEffectOnce } from 'react-use'
 import { MessageBoxButtonProps } from '../../../../lib/stores/dialog'
 import styled from '../../../../lib/styled'
 import Button from '../../../atoms/Button'
-import LeftToRightList from '../../../atoms/LeftRightList'
+import LeftToRightList from '../../../atoms/LeftToRightList'
 
 type MessageBoxDialogProps = {
   buttons?: MessageBoxButtonProps[]

From 5da1f474641f3a687c42be20f83e390c41023074 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Mon, 6 Sep 2021 13:01:11 +0900
Subject: [PATCH 076/106] remove the to in naming

---
 src/cloud/components/Blocks/BlockCreationModal.tsx          | 6 +++---
 .../atoms/{LeftToRightList.tsx => LeftRightList.tsx}        | 4 ++--
 .../organisms/Dialog/molecules/MessageBoxDialogBody.tsx     | 6 +++---
 3 files changed, 8 insertions(+), 8 deletions(-)
 rename src/design/components/atoms/{LeftToRightList.tsx => LeftRightList.tsx} (90%)

diff --git a/src/cloud/components/Blocks/BlockCreationModal.tsx b/src/cloud/components/Blocks/BlockCreationModal.tsx
index 2bf8c7c0a1..05b7e25061 100644
--- a/src/cloud/components/Blocks/BlockCreationModal.tsx
+++ b/src/cloud/components/Blocks/BlockCreationModal.tsx
@@ -2,7 +2,7 @@ import { mdiCodeTags, mdiFileDocumentOutline, mdiTable } from '@mdi/js'
 import React from 'react'
 import Button from '../../../design/components/atoms/Button'
 import Icon from '../../../design/components/atoms/Icon'
-import LeftToRightList from '../../../design/components/atoms/LeftToRightList'
+import LeftRightList from '../../../design/components/atoms/LeftRightList'
 import styled from '../../../design/lib/styled'
 
 interface BlockCreationModalProps {
@@ -17,7 +17,7 @@ const BlockCreationModal = ({
   onTableCreation,
 }: BlockCreationModalProps) => (
   <Container>
-    <LeftToRightList className='block__creation__list'>
+    <LeftRightList className='block__creation__list'>
       {onMarkdownCreation != null && (
         <Button
           variant='transparent'
@@ -51,7 +51,7 @@ const BlockCreationModal = ({
           <span>Embed</span>
         </Button>
       )}
-    </LeftToRightList>
+    </LeftRightList>
   </Container>
 )
 
diff --git a/src/design/components/atoms/LeftToRightList.tsx b/src/design/components/atoms/LeftRightList.tsx
similarity index 90%
rename from src/design/components/atoms/LeftToRightList.tsx
rename to src/design/components/atoms/LeftRightList.tsx
index e7cb6c885e..cfe79f8094 100644
--- a/src/design/components/atoms/LeftToRightList.tsx
+++ b/src/design/components/atoms/LeftRightList.tsx
@@ -7,7 +7,7 @@ interface LeftToRightListProps {
   className?: string
   ignoreFocus?: boolean
 }
-const LeftToRightList: React.FC<LeftToRightListProps> = ({
+const LeftRightList: React.FC<LeftToRightListProps> = ({
   className,
   children,
   ignoreFocus,
@@ -42,4 +42,4 @@ const LeftToRightList: React.FC<LeftToRightListProps> = ({
   )
 }
 
-export default LeftToRightList
+export default LeftRightList
diff --git a/src/design/components/organisms/Dialog/molecules/MessageBoxDialogBody.tsx b/src/design/components/organisms/Dialog/molecules/MessageBoxDialogBody.tsx
index 9144300324..1a392ef915 100644
--- a/src/design/components/organisms/Dialog/molecules/MessageBoxDialogBody.tsx
+++ b/src/design/components/organisms/Dialog/molecules/MessageBoxDialogBody.tsx
@@ -3,7 +3,7 @@ import { useEffectOnce } from 'react-use'
 import { MessageBoxButtonProps } from '../../../../lib/stores/dialog'
 import styled from '../../../../lib/styled'
 import Button from '../../../atoms/Button'
-import LeftToRightList from '../../../atoms/LeftToRightList'
+import LeftRightList from '../../../atoms/LeftRightList'
 
 type MessageBoxDialogProps = {
   buttons?: MessageBoxButtonProps[]
@@ -45,7 +45,7 @@ const MessageBoxDialogBody = ({
 
   return (
     <Container onKeyDown={handleBodyKeyDown}>
-      <LeftToRightList ignoreFocus={true}>
+      <LeftRightList ignoreFocus={true}>
         {buttons == null ? (
           <Button variant='secondary' onClick={closeDialog}>
             Close
@@ -69,7 +69,7 @@ const MessageBoxDialogBody = ({
             </Button>
           ))
         )}
-      </LeftToRightList>
+      </LeftRightList>
     </Container>
   )
 }

From b870a10c8583599cf26fd6331b26204e4fbb48ee Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Mon, 6 Sep 2021 13:18:32 +0900
Subject: [PATCH 077/106] fix container blocks

---
 src/cloud/components/Blocks/BlockContent.tsx  |   3 +-
 .../components/Blocks/BlockCreationModal.tsx  |  20 +++-
 .../components/Blocks/views/Container.tsx     | 101 +++++++++++-------
 src/cloud/components/Blocks/views/index.tsx   |   7 +-
 4 files changed, 87 insertions(+), 44 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index 347f0e3ec8..b9408df369 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -251,7 +251,8 @@ const BlockContent = ({ doc }: BlockContentProps) => {
           ref={contentScrollerRef}
         >
           <BlockView
-            block={currentBlock || state.block.children[0]}
+            isRootBlock={true}
+            block={currentBlock || state.block}
             actions={actions}
             canvas={doc}
             realtime={provider}
diff --git a/src/cloud/components/Blocks/BlockCreationModal.tsx b/src/cloud/components/Blocks/BlockCreationModal.tsx
index 05b7e25061..2591e6ac82 100644
--- a/src/cloud/components/Blocks/BlockCreationModal.tsx
+++ b/src/cloud/components/Blocks/BlockCreationModal.tsx
@@ -1,4 +1,9 @@
-import { mdiCodeTags, mdiFileDocumentOutline, mdiTable } from '@mdi/js'
+import {
+  mdiCodeTags,
+  mdiFileDocumentOutline,
+  mdiPackageVariantClosed,
+  mdiTable,
+} from '@mdi/js'
 import React from 'react'
 import Button from '../../../design/components/atoms/Button'
 import Icon from '../../../design/components/atoms/Icon'
@@ -6,6 +11,7 @@ import LeftRightList from '../../../design/components/atoms/LeftRightList'
 import styled from '../../../design/lib/styled'
 
 interface BlockCreationModalProps {
+  onContainerCreation?: () => void
   onMarkdownCreation?: () => void
   onTableCreation?: () => void
   onEmbedCreation?: () => void
@@ -15,9 +21,21 @@ const BlockCreationModal = ({
   onMarkdownCreation,
   onEmbedCreation,
   onTableCreation,
+  onContainerCreation,
 }: BlockCreationModalProps) => (
   <Container>
     <LeftRightList className='block__creation__list'>
+      {onContainerCreation != null && (
+        <Button
+          variant='transparent'
+          id='block__creation__container'
+          onClick={onContainerCreation}
+          className='block__view__add__selector'
+        >
+          <Icon size={50} path={mdiPackageVariantClosed} />
+          <span>Page</span>
+        </Button>
+      )}
       {onMarkdownCreation != null && (
         <Button
           variant='transparent'
diff --git a/src/cloud/components/Blocks/views/Container.tsx b/src/cloud/components/Blocks/views/Container.tsx
index 85d5d19e51..39e724a54d 100644
--- a/src/cloud/components/Blocks/views/Container.tsx
+++ b/src/cloud/components/Blocks/views/Container.tsx
@@ -37,6 +37,11 @@ const ContainerView = ({
     async (newBlock: BlockCreateRequestBody) => {
       const createdBlock = await actions.create(newBlock, block)
       closeAllModals()
+
+      if (canvas.rootBlock.id === block.id) {
+        setCurrentBlock(createdBlock)
+        return
+      }
       const blockElem = document.getElementById(getBlockDomId(createdBlock))
       scrollToElement(blockElem)
 
@@ -52,9 +57,25 @@ const ContainerView = ({
         })
       }
     },
-    [block, actions, closeAllModals, scrollToElement]
+    [
+      block,
+      actions,
+      closeAllModals,
+      scrollToElement,
+      canvas.rootBlock.id,
+      setCurrentBlock,
+    ]
   )
 
+  const createContainer = useCallback(() => {
+    return createBlock({
+      name: 'Page',
+      type: 'container',
+      children: [],
+      data: null,
+    })
+  }, [createBlock])
+
   const createMarkdown = useCallback(() => {
     return createBlock({
       name: '',
@@ -79,6 +100,8 @@ const ContainerView = ({
     })
   }, [createBlock, openModal])
 
+  const isRootBlock = canvas.rootBlock.id === block.id
+
   return (
     <StyledContainerView
       className={isChild && 'block__view--nested'}
@@ -96,47 +119,49 @@ const ContainerView = ({
             : []
         }
       >
-        <h1>{canvas.rootBlock.id === block.id ? canvas.title : block.name}</h1>
+        {!isRootBlock && <h1>{block.name}</h1>}
       </BlockLayout>
       <div className='block__view__container__content'>
-        {block.children.map((child) => {
-          return (
-            <BlockView
-              key={child.id}
-              block={child}
-              actions={actions}
-              isChild={true}
-              canvas={canvas}
-              realtime={realtime}
-              scrollToElement={scrollToElement}
-              setCurrentBlock={setCurrentBlock}
-              currentUserIsCoreMember={currentUserIsCoreMember}
-            />
-          )
-        })}
+        {!isRootBlock &&
+          block.children.map((child) => {
+            return (
+              <BlockView
+                key={child.id}
+                block={child}
+                actions={actions}
+                isChild={true}
+                canvas={canvas}
+                realtime={realtime}
+                scrollToElement={scrollToElement}
+                setCurrentBlock={setCurrentBlock}
+                currentUserIsCoreMember={currentUserIsCoreMember}
+              />
+            )
+          })}
       </div>
-      {!isChild && (
-        <BlockToolbar
-          controls={[
-            {
-              iconPath: mdiPlusBoxOutline,
-              label: 'Add Block',
-              onClick: () =>
-                openModal(
-                  <BlockCreationModal
-                    onMarkdownCreation={createMarkdown}
-                    onEmbedCreation={createEmbed}
-                    onTableCreation={createTable}
-                  />,
-                  {
-                    title: 'Add a block',
-                    showCloseIcon: true,
+      <BlockToolbar
+        controls={[
+          {
+            iconPath: mdiPlusBoxOutline,
+            label: 'Add Block',
+            onClick: () =>
+              openModal(
+                <BlockCreationModal
+                  onContainerCreation={
+                    isRootBlock ? createContainer : undefined
                   }
-                ),
-            },
-          ]}
-        />
-      )}
+                  onMarkdownCreation={createMarkdown}
+                  onEmbedCreation={createEmbed}
+                  onTableCreation={createTable}
+                />,
+                {
+                  title: 'Add a block',
+                  showCloseIcon: true,
+                }
+              ),
+          },
+        ]}
+      />
     </StyledContainerView>
   )
 }
diff --git a/src/cloud/components/Blocks/views/index.tsx b/src/cloud/components/Blocks/views/index.tsx
index 84ed58e16a..2a93817543 100644
--- a/src/cloud/components/Blocks/views/index.tsx
+++ b/src/cloud/components/Blocks/views/index.tsx
@@ -10,6 +10,7 @@ import Table from './Table'
 import GithubIssueView from './GithubIssue'
 
 export interface ViewProps<T extends Block> {
+  isRootBlock?: boolean
   block: T
   actions: BlockActions
   canvas: Canvas
@@ -20,6 +21,7 @@ export interface ViewProps<T extends Block> {
   currentUserIsCoreMember: boolean
 }
 export const BlockView = ({
+  isRootBlock,
   block,
   actions,
   canvas,
@@ -29,14 +31,11 @@ export const BlockView = ({
   scrollToElement,
   setCurrentBlock,
 }: ViewProps<Block>) => {
-  if (block == null) {
-    return null
-  }
-
   switch (block.type) {
     case 'container':
       return (
         <Container
+          isRootBlock={isRootBlock}
           block={block}
           actions={actions}
           isChild={isChild}

From e37da1b8a05eb90ff6171c2374ea45e295c783ca Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Tue, 7 Sep 2021 07:56:34 +0900
Subject: [PATCH 078/106] fix tables and UI;

---
 src/cloud/components/Blocks/BlockContent.tsx  |  7 ++++-
 src/cloud/components/Blocks/BlockTree.tsx     | 16 +---------
 .../components/Blocks/views/Table/index.tsx   | 29 +++++++++++++++----
 src/cloud/lib/utils/blocks.ts                 | 14 +++++++++
 4 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index b9408df369..fdeab9a464 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -252,7 +252,12 @@ const BlockContent = ({ doc }: BlockContentProps) => {
         >
           <BlockView
             isRootBlock={true}
-            block={currentBlock || state.block}
+            block={
+              currentBlock ||
+              (state.block.children.length > 0
+                ? state.block.children[0]
+                : state.block)
+            }
             actions={actions}
             canvas={doc}
             realtime={provider}
diff --git a/src/cloud/components/Blocks/BlockTree.tsx b/src/cloud/components/Blocks/BlockTree.tsx
index c7f952e4a4..2a47676b52 100644
--- a/src/cloud/components/Blocks/BlockTree.tsx
+++ b/src/cloud/components/Blocks/BlockTree.tsx
@@ -2,12 +2,12 @@ import React from 'react'
 import { mdiTrashCan } from '@mdi/js'
 import { Block } from '../../api/blocks'
 import styled from '../../../design/lib/styled'
-import { capitalize } from '../../lib/utils/string'
 import BlockIcon from './BlockIcon'
 import NavigationItem from '../../../design/components/molecules/Navigation/NavigationItem'
 import { min } from 'ramda'
 import cc from 'classcat'
 import { FoldingProps } from '../../../design/components/atoms/FoldingWrapper'
+import { blockTitle } from '../../lib/utils/blocks'
 
 interface BlockTreeProps {
   idPrefix?: string
@@ -42,7 +42,6 @@ const BlockTree = ({
       depth={parentDepth}
     >
       <NavigationItem
-        className='block__editor__nav--item'
         folded={showFoldEvents ? root.folded : undefined}
         folding={showFoldEvents ? root.folding : undefined}
         id={`${idPrefix}-block-${root.id}`}
@@ -75,19 +74,6 @@ const BlockTree = ({
   )
 }
 
-function blockTitle(block: Block) {
-  switch (block.type) {
-    case 'github.issue':
-      return block.data?.title || 'Github Issue'
-    case 'embed':
-    case 'table':
-    case 'container':
-      return block.name.trim() === '' ? capitalize(block.type) : block.name
-    default:
-      return capitalize(block.type)
-  }
-}
-
 const StyledBlockTree = styled.div<{ depth: number }>`
   position: relative;
   width: 100%;
diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
index f8683ad795..92847c3e29 100644
--- a/src/cloud/components/Blocks/views/Table/index.tsx
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -1,6 +1,11 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { ViewProps } from '../'
-import { mdiCog, mdiDownloadOutline, mdiTrashCanOutline } from '@mdi/js'
+import {
+  mdiCog,
+  mdiDownloadOutline,
+  mdiTrashCan,
+  mdiTrashCanOutline,
+} from '@mdi/js'
 import GithubIssueForm from '../../forms/GithubIssueForm'
 import {
   Column,
@@ -30,7 +35,9 @@ import Flexbox from '../../../../../design/components/atoms/Flexbox'
 import BlockLayout from '../../BlockLayout'
 import FormInput from '../../../../../design/components/molecules/Form/atoms/FormInput'
 import { useDebounce } from 'react-use'
-import BlockTree from '../../BlockTree'
+import { blockTitle } from '../../../../lib/utils/blocks'
+import BlockIcon from '../../BlockIcon'
+import NavigationItem from '../../../../../design/components/molecules/Navigation/NavigationItem'
 
 type GithubCellProps = BlockDataProps<TableBlock['children'][number]>
 interface TableViewProps extends ViewProps<TableBlock> {
@@ -230,10 +237,20 @@ const TableView = ({
                           alignItems='baseline'
                           justifyContent='center'
                         >
-                          <BlockTree
-                            root={child}
-                            onSelect={setCurrentBlock}
-                            onDelete={actions.remove}
+                          <NavigationItem
+                            id={`table-block-${block.id}-${child.id}`}
+                            label={blockTitle(child)}
+                            icon={{
+                              type: 'node',
+                              icon: <BlockIcon block={child} size={16} />,
+                            }}
+                            labelClick={() => setCurrentBlock(child)}
+                            controls={[
+                              {
+                                icon: mdiTrashCan,
+                                onClick: () => actions.remove(child),
+                              },
+                            ]}
                             className='table__title__tree'
                           />
                         </Flexbox>
diff --git a/src/cloud/lib/utils/blocks.ts b/src/cloud/lib/utils/blocks.ts
index 253e25890b..15caec8d05 100644
--- a/src/cloud/lib/utils/blocks.ts
+++ b/src/cloud/lib/utils/blocks.ts
@@ -1,3 +1,4 @@
+import { capitalize } from 'lodash'
 import { compareDateString } from '../../../design/lib/date'
 import { Block } from '../../api/blocks'
 
@@ -14,3 +15,16 @@ export function orderBlockChildren({ children, ...rest }: Block): Block {
         : [],
   } as Block
 }
+
+export function blockTitle(block: Block) {
+  switch (block.type) {
+    case 'github.issue':
+      return block.data?.title || 'Github Issue'
+    case 'embed':
+    case 'table':
+    case 'container':
+      return block.name.trim() === '' ? capitalize(block.type) : block.name
+    default:
+      return capitalize(block.type)
+  }
+}

From 91361850c5f4f39c6446d7fb47d28f6e5668e14b Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Tue, 7 Sep 2021 08:01:01 +0900
Subject: [PATCH 079/106] add embed url

---
 src/cloud/components/Blocks/forms/EmbedForm.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/cloud/components/Blocks/forms/EmbedForm.tsx b/src/cloud/components/Blocks/forms/EmbedForm.tsx
index d9cc9f77b3..61677ee15b 100644
--- a/src/cloud/components/Blocks/forms/EmbedForm.tsx
+++ b/src/cloud/components/Blocks/forms/EmbedForm.tsx
@@ -26,11 +26,12 @@ const EmbedForm = ({ onSubmit }: EmbedFormProps) => {
         )
         const regexResult = nameRegex.exec(url)
         const name = regexResult != null ? capitalize(regexResult[1]) : 'Embed'
+
         await onSubmit({
           name,
           type: 'embed',
           children: [],
-          data: { url },
+          data: { url: getEmbedURL(url) },
         })
       } finally {
       }
@@ -72,4 +73,16 @@ const EmbedForm = ({ onSubmit }: EmbedFormProps) => {
   )
 }
 
+function getEmbedURL(url: string) {
+  const isFigmaDefaultURL = /^(?:https:\/\/)?(?:www\.)?figma\.com\/(file|proto)\/([0-9a-zA-Z]{22,128})(?:\/([^\?\n\r\/]+)?((?:\?[^\/]*?node-id=([^&\n\r\/]+))?[^\/]*?)(\/duplicate)?)?$/.test(
+    url
+  )
+  if (isFigmaDefaultURL) {
+    return `https://www.figma.com/embed?embed_host=share&url=${encodeURIComponent(
+      url
+    )}`
+  }
+  return getEmbedURL
+}
+
 export default EmbedForm

From 8fd005193a03e39e3cc48ac3bb902ead67174171 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Tue, 7 Sep 2021 08:20:38 +0900
Subject: [PATCH 080/106] fix github issueform

---
 src/cloud/api/integrations/index.ts           |  1 +
 .../Blocks/forms/GithubIssueForm.tsx          | 42 +++++++++++++++----
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/cloud/api/integrations/index.ts b/src/cloud/api/integrations/index.ts
index e0cc2c25a7..75ee27d853 100644
--- a/src/cloud/api/integrations/index.ts
+++ b/src/cloud/api/integrations/index.ts
@@ -29,6 +29,7 @@ export interface IntegrationActionTypes {
       login: string
     }
   }[]
+  ['repo:pulls']: any[]
   ['repo:issues']: any[]
   ['repo:labels']: {
     id: number
diff --git a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
index 0d402e5821..30c6b2d85f 100644
--- a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
+++ b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
@@ -181,6 +181,13 @@ const GithubIssueSelector = ({
   const [currentOrg, setCurrentOrg] = useState<Org | null>(null)
   const [repos, setRepos] = useState<Repo[]>([])
   const [currentRepo, setCurrentRepo] = useState<Repo | null>(null)
+  const [searchScope, setSearchScope] = useState<{
+    value: 'repo:issues' | 'repo:pulls'
+    label: string
+  }>({
+    label: 'Issues',
+    value: 'repo:issues',
+  })
   const [issues, setIssues] = useState<Issue[]>([])
   const [selectedIssues, setSelectedIssues] = useState<Set<Issue>>(new Set())
   const [page, setPage] = useState(1)
@@ -236,7 +243,7 @@ const GithubIssueSelector = ({
     const integrationId = integrationRef.current.id
     if (currentRepo != null) {
       setIsLoading(true)
-      getAction(integrationRef.current, 'repo:issues', {
+      getAction(integrationRef.current, searchScope.value, {
         owner: currentRepo.owner.login,
         repo: currentRepo.name,
         per_page: perPagePerQuery,
@@ -252,7 +259,7 @@ const GithubIssueSelector = ({
         .catch(errorHandleRef.current)
       setIsLoading(false)
     }
-  }, [currentRepo])
+  }, [currentRepo, searchScope.value])
 
   const getMore = useCallback(async () => {
     if (currentRepo != null) {
@@ -260,7 +267,7 @@ const GithubIssueSelector = ({
         setIsLoading(true)
         const integrationId = integrationRef.current.id
         const issues = (
-          await getAction(integrationRef.current, 'repo:issues', {
+          await getAction(integrationRef.current, searchScope.value, {
             owner: currentRepo.owner.login,
             repo: currentRepo.name,
             page: page + 1,
@@ -278,7 +285,7 @@ const GithubIssueSelector = ({
         setIsLoading(false)
       }
     }
-  }, [currentRepo, page])
+  }, [currentRepo, page, searchScope.value])
 
   const setIntegration = useCallback(
     ({ value }) => {
@@ -409,6 +416,17 @@ const GithubIssueSelector = ({
             onChange={setRepo}
           />
         </FormRowItem>
+        <FormRowItem>
+          <FormSelect
+            value={searchScope}
+            isLoading={isLoading}
+            options={[
+              { label: 'Issues', value: 'repo:issues' },
+              { label: 'Pulls', value: 'repo:pulls' },
+            ]}
+            onChange={setSearchScope}
+          />
+        </FormRowItem>
         <FormRowItem>
           <FormInput
             placeholder='Search'
@@ -431,10 +449,11 @@ const GithubIssueSelector = ({
                   label={'Title'}
                 />
               </td>
+              <td>Number</td>
               <td>Assignees</td>
               <td>Status</td>
               <td>Labels</td>
-              <td>LinkedPR</td>
+              {searchScope.value === 'repo:issues' && <td>LinkedPR</td>}
             </tr>
           </thead>
           <tbody>
@@ -447,6 +466,7 @@ const GithubIssueSelector = ({
                     label={issue.title}
                   />
                 </td>
+                <td>{issue.number}</td>
                 <td>
                   {issue.assignees
                     .map((assignee: any) => assignee.login)
@@ -456,9 +476,11 @@ const GithubIssueSelector = ({
                 <td>
                   {issue.labels.map((label: any) => label.name).join(', ')}
                 </td>
-                <td>
-                  {issue.pull_request != null && issue.pull_request.html_url}
-                </td>
+                {searchScope.value === 'repo:issues' && (
+                  <td>
+                    {issue.pull_request != null && issue.pull_request.html_url}
+                  </td>
+                )}
               </tr>
             ))}
           </tbody>
@@ -476,7 +498,9 @@ const GithubIssueSelector = ({
             </div>
           ) : (
             <div className='github-issue__form__placeholder'>
-              No more issues could be found...
+              No more{' '}
+              {searchScope.value === 'repo:issues' ? 'issues' : 'pull requests'}{' '}
+              could be found...
             </div>
           )
         ) : (

From 6beba0140a43b24e5b3d1bde2eb916f56141ee1c Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Tue, 7 Sep 2021 09:20:35 +0900
Subject: [PATCH 081/106] fix new doc button

---
 src/cloud/components/buttons/NewDocButton.tsx | 2 +-
 src/cloud/interfaces/db/team.ts               | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/cloud/components/buttons/NewDocButton.tsx b/src/cloud/components/buttons/NewDocButton.tsx
index 5970aa6122..04002977b3 100644
--- a/src/cloud/components/buttons/NewDocButton.tsx
+++ b/src/cloud/components/buttons/NewDocButton.tsx
@@ -85,7 +85,7 @@ const NewDocButton = ({ team }: { team: SerializedTeam }) => {
       icon={mdiPencilBoxOutline}
       id='sidebar-newdoc-btn'
       label={translate(lngKeys.CreateNewDoc)}
-      labelClick={openDocTypeSelect}
+      labelClick={team.state.blocksBeta ? openDocTypeSelect : openNewDocModal}
       contextControls={[
         {
           icon: mdiPencilBoxMultipleOutline,
diff --git a/src/cloud/interfaces/db/team.ts b/src/cloud/interfaces/db/team.ts
index 3a211382d6..405c1094b3 100644
--- a/src/cloud/interfaces/db/team.ts
+++ b/src/cloud/interfaces/db/team.ts
@@ -27,4 +27,5 @@ export type SerializedTeam = SerializedUnserializableTeamProps &
 export interface TeamOnboardingState {
   import?: boolean
   settings?: boolean
+  blocksBeta?: boolean
 }

From c4194178410ebb2dec092961e0593ff48cfcbcfc Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Tue, 7 Sep 2021 09:29:18 +0900
Subject: [PATCH 082/106] fix application error page and block tables

---
 src/cloud/components/Blocks/views/Table/index.tsx | 2 +-
 src/cloud/components/Router.tsx                   | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
index 92847c3e29..4144f90551 100644
--- a/src/cloud/components/Blocks/views/Table/index.tsx
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -498,7 +498,7 @@ const StyledTableView = styled.div`
   & td {
     min-width: 130px;
     min-height: 20px;
-    height: 1px;
+    height: auto;
   }
 
   td,
diff --git a/src/cloud/components/Router.tsx b/src/cloud/components/Router.tsx
index 83cf3430b4..df79781369 100644
--- a/src/cloud/components/Router.tsx
+++ b/src/cloud/components/Router.tsx
@@ -92,6 +92,7 @@ const V2CombinedProvider = combineProviders(
 interface PageInfo {
   Component: React.ComponentType<any>
   pageProps: any
+  isError?: boolean
 }
 
 interface PageSpec {
@@ -205,6 +206,7 @@ const Router = () => {
             }
 
             setPageInfo({
+              isError: true,
               Component: ErrorPage,
               pageProps: {
                 error,
@@ -258,7 +260,7 @@ const Router = () => {
         <CombinedProvider>
           <NavProvider pageProps={pageInfo.pageProps as any}>
             <V2ThemeProvider>
-              {isApplicationPagePathname(pathname) ? (
+              {isApplicationPagePathname(pathname) && !pageInfo.isError ? (
                 <Application>
                   <pageInfo.Component {...pageInfo.pageProps} />
                 </Application>

From a28e4b10283b4ed105e0b7f6011b89b3181471a1 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Tue, 7 Sep 2021 12:02:09 +0900
Subject: [PATCH 083/106] sending map and api changes

---
 src/cloud/components/Blocks/BlockContent.tsx  | 32 +++++-
 src/cloud/components/Blocks/BlockLayout.tsx   |  1 +
 src/cloud/components/Blocks/BlockTree.tsx     | 15 ++-
 .../components/Blocks/views/Container.tsx     | 49 ++++++----
 .../components/Blocks/views/GithubIssue.tsx   | 35 ++++---
 .../components/Blocks/views/Markdown.tsx      |  2 +-
 .../components/Blocks/views/Table/index.tsx   | 28 ++++++
 src/cloud/components/Blocks/views/index.tsx   |  7 ++
 src/cloud/lib/hooks/useBlocksApi.ts           | 97 +++++++++++++++++++
 src/cloud/lib/hooks/useDocBlocks.ts           | 42 ++++++--
 src/cloud/lib/stores/blocks/index.ts          | 40 +-------
 src/cloud/lib/utils/events.ts                 |  8 ++
 .../molecules/Navigation/NavigationItem.tsx   |  5 +-
 src/design/lib/hooks/useBulkApi.ts            |  9 +-
 src/design/lib/types.ts                       |  1 +
 15 files changed, 282 insertions(+), 89 deletions(-)
 create mode 100644 src/cloud/lib/hooks/useBlocksApi.ts

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index fdeab9a464..6712c0ada4 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -28,6 +28,11 @@ import {
   useSidebarCollapse,
 } from '../../lib/stores/sidebarCollapse'
 import { FoldingProps } from '../../../design/components/atoms/FoldingWrapper'
+import {
+  markdownBlockEventEmitter,
+  tableBlockEventEmitter,
+} from '../../lib/utils/events'
+import { sleep } from '../../../lib/sleep'
 
 export interface Canvas extends SerializedDocWithBookmark {
   rootBlock: ContainerBlock
@@ -43,7 +48,7 @@ interface BlockContentProps {
 
 const BlockContent = ({ doc }: BlockContentProps) => {
   const { currentUserIsCoreMember } = usePage()
-  const { state, actions } = useDocBlocks(doc.rootBlock.id)
+  const { state, actions, sendingMap } = useDocBlocks(doc.rootBlock.id)
   const { openModal, closeAllModals } = useModal()
   const [currentBlock, setCurrentBlock] = useState<Block | null>(null)
   const [provider] = useRealtime({
@@ -65,9 +70,28 @@ const BlockContent = ({ doc }: BlockContentProps) => {
   const createBlock = useCallback(
     async (block: BlockCreateRequestBody) => {
       try {
-        const newBlock = await actions.create(block, doc.rootBlock)
+        const res = await actions.create(block, doc.rootBlock, {
+          afterSuccess: (block) => {
+            setCurrentBlock(block)
+          },
+        })
+        if (!res.err) {
+          const block = res.data
+          if (block.type === 'markdown') {
+            await sleep(100) //rendering delay
+            markdownBlockEventEmitter.dispatch({
+              type: 'edit',
+              id: block.id,
+            })
+          } else if (block.type === 'table') {
+            await sleep(100) //rendering delay
+            tableBlockEventEmitter.dispatch({
+              type: 'focus-title',
+              id: block.id,
+            })
+          }
+        }
         closeAllModals()
-        setCurrentBlock(newBlock)
       } catch (error) {
         pushApiErrorMessage(error)
       }
@@ -171,6 +195,7 @@ const BlockContent = ({ doc }: BlockContentProps) => {
               onDelete={actions.remove}
               idPrefix='nav'
               showFoldEvents={true}
+              sendingMap={sendingMap}
             />
           ))}
         </Scroller>
@@ -264,6 +289,7 @@ const BlockContent = ({ doc }: BlockContentProps) => {
             setCurrentBlock={setCurrentBlock}
             scrollToElement={scrollToElement}
             currentUserIsCoreMember={currentUserIsCoreMember}
+            sendingMap={sendingMap}
           />
         </Scroller>
         <div id='block__editor__view__toolbar-portal' />
diff --git a/src/cloud/components/Blocks/BlockLayout.tsx b/src/cloud/components/Blocks/BlockLayout.tsx
index 89e7dd336d..e9190a0764 100644
--- a/src/cloud/components/Blocks/BlockLayout.tsx
+++ b/src/cloud/components/Blocks/BlockLayout.tsx
@@ -76,6 +76,7 @@ function hexToRgb(hex: string) {
 const BlockLayoutContainer = styled.div`
   width: 100%;
   position: relative;
+  z-index: 0;
   transition: all 0.3s ease-in-out;
   background: ${({ theme }) => theme.colors.background.primary};
   padding: ${({ theme }) => theme.sizes.spaces.md}px
diff --git a/src/cloud/components/Blocks/BlockTree.tsx b/src/cloud/components/Blocks/BlockTree.tsx
index 2a47676b52..fcdbccacc4 100644
--- a/src/cloud/components/Blocks/BlockTree.tsx
+++ b/src/cloud/components/Blocks/BlockTree.tsx
@@ -8,16 +8,18 @@ import { min } from 'ramda'
 import cc from 'classcat'
 import { FoldingProps } from '../../../design/components/atoms/FoldingWrapper'
 import { blockTitle } from '../../lib/utils/blocks'
+import { BlockActionRemove } from '../../lib/hooks/useDocBlocks'
 
 interface BlockTreeProps {
   idPrefix?: string
   root: Block & { folding?: FoldingProps; folded?: boolean }
   onSelect: (block: Block) => void
-  onDelete?: (block: Block) => void
+  onDelete?: BlockActionRemove
   active?: Block
   depth?: number
   className?: string
   showFoldEvents?: boolean
+  sendingMap: Map<string, string>
 }
 
 const BlockTree = ({
@@ -29,6 +31,7 @@ const BlockTree = ({
   active,
   className,
   showFoldEvents,
+  sendingMap,
 }: BlockTreeProps) => {
   const parentDepth = min(depth || 1, 6)
   return (
@@ -53,7 +56,14 @@ const BlockTree = ({
         controls={
           onDelete == null || depth === 0
             ? []
-            : [{ icon: mdiTrashCan, onClick: () => onDelete(root) }]
+            : [
+                {
+                  icon: mdiTrashCan,
+                  onClick: () => onDelete(root),
+                  disabled: sendingMap.has(root.id),
+                  spinning: sendingMap.get(root.id) === 'delete-block',
+                },
+              ]
         }
       />
       {(!showFoldEvents || !root.folded) &&
@@ -68,6 +78,7 @@ const BlockTree = ({
             active={active}
             depth={parentDepth + 1}
             showFoldEvents={showFoldEvents}
+            sendingMap={sendingMap}
           />
         ))}
     </StyledBlockTree>
diff --git a/src/cloud/components/Blocks/views/Container.tsx b/src/cloud/components/Blocks/views/Container.tsx
index 39e724a54d..d9c837bbf3 100644
--- a/src/cloud/components/Blocks/views/Container.tsx
+++ b/src/cloud/components/Blocks/views/Container.tsx
@@ -13,8 +13,11 @@ import { useModal } from '../../../../design/lib/stores/modal'
 import BlockCreationModal from '../BlockCreationModal'
 import BlockToolbar from '../BlockToolbar'
 import BlockLayout from '../BlockLayout'
-import { getTableBlockInputId } from './Table'
-import { markdownBlockEventEmitter } from '../../../lib/utils/events'
+import {
+  markdownBlockEventEmitter,
+  tableBlockEventEmitter,
+} from '../../../lib/utils/events'
+import { sleep } from '../../../../lib/sleep'
 
 interface ContainerViewProps extends ViewProps<ContainerBlock> {
   setCurrentBlock: React.Dispatch<React.SetStateAction<Block | null>>
@@ -28,42 +31,51 @@ const ContainerView = ({
   isChild,
   realtime,
   currentUserIsCoreMember,
+  sendingMap,
   scrollToElement,
   setCurrentBlock,
 }: ContainerViewProps) => {
   const { openModal, closeAllModals } = useModal()
 
-  const createBlock = useCallback(
-    async (newBlock: BlockCreateRequestBody) => {
-      const createdBlock = await actions.create(newBlock, block)
-      closeAllModals()
-
-      if (canvas.rootBlock.id === block.id) {
-        setCurrentBlock(createdBlock)
-        return
-      }
+  const domBlockCreationHandler = useCallback(
+    async (createdBlock: Block) => {
+      await sleep(100) //rendering delay
       const blockElem = document.getElementById(getBlockDomId(createdBlock))
       scrollToElement(blockElem)
-
       if (createdBlock.type === 'table') {
-        const titleElement = document.getElementById(
-          getTableBlockInputId(createdBlock)
-        )
-        if (titleElement != null) titleElement.focus()
-      } else if (newBlock.type === 'markdown') {
+        tableBlockEventEmitter.dispatch({
+          type: 'focus-title',
+          id: createdBlock.id,
+        })
+      } else if (createdBlock.type === 'markdown') {
         markdownBlockEventEmitter.dispatch({
           type: 'edit',
           id: createdBlock.id,
         })
       }
     },
+    [scrollToElement]
+  )
+
+  const createBlock = useCallback(
+    async (newBlock: BlockCreateRequestBody) => {
+      await actions.create(newBlock, block, {
+        afterSuccess: (createdBlock) => {
+          if (canvas.rootBlock.id === block.id) {
+            setCurrentBlock(createdBlock)
+          }
+          domBlockCreationHandler(createdBlock)
+        },
+      })
+      closeAllModals()
+    },
     [
       block,
       actions,
       closeAllModals,
-      scrollToElement,
       canvas.rootBlock.id,
       setCurrentBlock,
+      domBlockCreationHandler,
     ]
   )
 
@@ -135,6 +147,7 @@ const ContainerView = ({
                 scrollToElement={scrollToElement}
                 setCurrentBlock={setCurrentBlock}
                 currentUserIsCoreMember={currentUserIsCoreMember}
+                sendingMap={sendingMap}
               />
             )
           })}
diff --git a/src/cloud/components/Blocks/views/GithubIssue.tsx b/src/cloud/components/Blocks/views/GithubIssue.tsx
index 69324a3caf..18613c6e9b 100644
--- a/src/cloud/components/Blocks/views/GithubIssue.tsx
+++ b/src/cloud/components/Blocks/views/GithubIssue.tsx
@@ -40,6 +40,7 @@ const GithubIssueView = ({
   actions: blockActions,
   canvas,
   currentUserIsCoreMember,
+  sendingMap,
   scrollToElement,
   setCurrentBlock,
 }: ViewProps<GithubIssueBlock>) => {
@@ -114,22 +115,25 @@ const GithubIssueView = ({
 
   const createBlock = useCallback(
     async (newBlock: BlockCreateRequestBody) => {
-      const createdBlock = await blockActions.create(newBlock, block)
-      closeAllModals()
-      const blockElem = document.getElementById(getBlockDomId(createdBlock))
-      scrollToElement(blockElem)
+      await blockActions.create(newBlock, block, {
+        afterSuccess: (createdBlock) => {
+          const blockElem = document.getElementById(getBlockDomId(createdBlock))
+          scrollToElement(blockElem)
 
-      if (createdBlock.type === 'table') {
-        const titleElement = document.getElementById(
-          getTableBlockInputId(createdBlock)
-        )
-        if (titleElement != null) titleElement.focus()
-      } else if (newBlock.type === 'markdown') {
-        markdownBlockEventEmitter.dispatch({
-          type: 'edit',
-          id: createdBlock.id,
-        })
-      }
+          if (createdBlock.type === 'table') {
+            const titleElement = document.getElementById(
+              getTableBlockInputId(createdBlock)
+            )
+            if (titleElement != null) titleElement.focus()
+          } else if (newBlock.type === 'markdown') {
+            markdownBlockEventEmitter.dispatch({
+              type: 'edit',
+              id: createdBlock.id,
+            })
+          }
+        },
+      })
+      closeAllModals()
     },
     [blockActions, block, closeAllModals, scrollToElement]
   )
@@ -233,6 +237,7 @@ const GithubIssueView = ({
               setCurrentBlock={setCurrentBlock}
               scrollToElement={scrollToElement}
               currentUserIsCoreMember={currentUserIsCoreMember}
+              sendingMap={sendingMap}
             />
           )
         })}
diff --git a/src/cloud/components/Blocks/views/Markdown.tsx b/src/cloud/components/Blocks/views/Markdown.tsx
index c6807590f3..32990f856d 100644
--- a/src/cloud/components/Blocks/views/Markdown.tsx
+++ b/src/cloud/components/Blocks/views/Markdown.tsx
@@ -96,6 +96,7 @@ const MarkdownView = ({
       if (detail.id !== block.id) {
         return
       }
+      console.log('got event')
 
       switch (detail.type) {
         case 'edit':
@@ -135,7 +136,6 @@ const MarkdownView = ({
             : `block__markdown--mode-${mode}`,
         ])}
         id={getBlockDomId(block)}
-        onEv
         onFocus={() => setMode('editor')}
       >
         {!synced ? (
diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
index 4144f90551..cc51c72ccb 100644
--- a/src/cloud/components/Blocks/views/Table/index.tsx
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -38,6 +38,10 @@ import { useDebounce } from 'react-use'
 import { blockTitle } from '../../../../lib/utils/blocks'
 import BlockIcon from '../../BlockIcon'
 import NavigationItem from '../../../../../design/components/molecules/Navigation/NavigationItem'
+import {
+  TableBlockEventDetails,
+  tableBlockEventEmitter,
+} from '../../../../lib/utils/events'
 
 type GithubCellProps = BlockDataProps<TableBlock['children'][number]>
 interface TableViewProps extends ViewProps<TableBlock> {
@@ -49,12 +53,14 @@ const TableView = ({
   actions,
   realtime,
   currentUserIsCoreMember,
+  sendingMap,
   setCurrentBlock,
 }: TableViewProps) => {
   const { openModal, openContextModal, closeAllModals } = useModal()
   const { state, actions: tableActions } = useBlockTable(block, realtime.doc)
   const [tableTitle, setTableTitle] = useState(block.name || '')
   const tableRef = useRef<string>(block.id)
+  const titleInputRef = useRef<HTMLInputElement>(null)
 
   const subscriptionsRef = useRef<Set<(col: Column[]) => void>>(new Set())
   useEffect(() => {
@@ -177,6 +183,24 @@ const TableView = ({
     }
   }, [block])
 
+  useEffect(() => {
+    const handler = ({ detail }: CustomEvent<TableBlockEventDetails>) => {
+      if (detail.id !== block.id) {
+        return
+      }
+
+      switch (detail.type) {
+        case 'focus-title':
+          titleInputRef.current?.focus()
+          return
+        default:
+          return
+      }
+    }
+    tableBlockEventEmitter.listen(handler)
+    return () => tableBlockEventEmitter.unlisten(handler)
+  }, [block])
+
   const anchorId = `block__${block.id}__table`
   return (
     <BlockLayout
@@ -203,6 +227,7 @@ const TableView = ({
           className='block__table__title'
           id={getTableBlockInputId(block)}
           disabled={!currentUserIsCoreMember}
+          ref={titleInputRef}
         />
         <div id={anchorId} />
         <div className='block__table__view__wrapper'>
@@ -249,6 +274,9 @@ const TableView = ({
                               {
                                 icon: mdiTrashCan,
                                 onClick: () => actions.remove(child),
+                                disabled: sendingMap.has(child.id),
+                                spinning:
+                                  sendingMap.get(child.id) === 'delete-block',
                               },
                             ]}
                             className='table__title__tree'
diff --git a/src/cloud/components/Blocks/views/index.tsx b/src/cloud/components/Blocks/views/index.tsx
index 2a93817543..cf89ea24c4 100644
--- a/src/cloud/components/Blocks/views/index.tsx
+++ b/src/cloud/components/Blocks/views/index.tsx
@@ -19,6 +19,7 @@ export interface ViewProps<T extends Block> {
   setCurrentBlock: React.Dispatch<React.SetStateAction<Block | null>>
   scrollToElement: (elem: HTMLElement | null) => void
   currentUserIsCoreMember: boolean
+  sendingMap: Map<string, string>
 }
 export const BlockView = ({
   isRootBlock,
@@ -28,6 +29,7 @@ export const BlockView = ({
   realtime,
   isChild,
   currentUserIsCoreMember,
+  sendingMap,
   scrollToElement,
   setCurrentBlock,
 }: ViewProps<Block>) => {
@@ -44,6 +46,7 @@ export const BlockView = ({
           setCurrentBlock={setCurrentBlock}
           scrollToElement={scrollToElement}
           currentUserIsCoreMember={currentUserIsCoreMember}
+          sendingMap={sendingMap}
         />
       )
     case 'embed':
@@ -57,6 +60,7 @@ export const BlockView = ({
           setCurrentBlock={setCurrentBlock}
           scrollToElement={scrollToElement}
           currentUserIsCoreMember={currentUserIsCoreMember}
+          sendingMap={sendingMap}
         />
       )
     case 'markdown':
@@ -70,6 +74,7 @@ export const BlockView = ({
           setCurrentBlock={setCurrentBlock}
           scrollToElement={scrollToElement}
           currentUserIsCoreMember={currentUserIsCoreMember}
+          sendingMap={sendingMap}
         />
       )
     case 'table':
@@ -83,6 +88,7 @@ export const BlockView = ({
           setCurrentBlock={setCurrentBlock}
           scrollToElement={scrollToElement}
           currentUserIsCoreMember={currentUserIsCoreMember}
+          sendingMap={sendingMap}
         />
       )
     case 'github.issue':
@@ -96,6 +102,7 @@ export const BlockView = ({
           setCurrentBlock={setCurrentBlock}
           scrollToElement={scrollToElement}
           currentUserIsCoreMember={currentUserIsCoreMember}
+          sendingMap={sendingMap}
         />
       )
     default:
diff --git a/src/cloud/lib/hooks/useBlocksApi.ts b/src/cloud/lib/hooks/useBlocksApi.ts
new file mode 100644
index 0000000000..3cf687207d
--- /dev/null
+++ b/src/cloud/lib/hooks/useBlocksApi.ts
@@ -0,0 +1,97 @@
+import { useCallback } from 'react'
+import shortid from 'shortid'
+import useBulkApi from '../../../design/lib/hooks/useBulkApi'
+import {
+  Block,
+  BlockCreateRequestBody,
+  BlockUpdateRequestBody,
+  createBlock,
+  deleteBlock,
+  updateBlock,
+} from '../../api/blocks'
+import { useBlocks } from '../stores/blocks'
+
+export interface CreateBlockApiOptions {
+  afterSuccess?: (block: Block) => void
+}
+export interface UpdateBlockApiOptions {
+  afterSuccess?: (block: Block) => void
+}
+
+export interface DeleteBlockApiOptions {
+  afterSuccess?: () => void
+}
+
+export function useBlocksApi() {
+  const { sendingMap, send } = useBulkApi()
+  const { getBlocks } = useBlocks()
+
+  const createBlockApi = useCallback(
+    async (
+      body: BlockCreateRequestBody,
+      parent: Block,
+      options: CreateBlockApiOptions,
+      root: string
+    ) => {
+      return send(shortid.generate(), 'create-block', {
+        api: () => createBlock(body, parent.id),
+        cb: async (block: Block) => {
+          await getBlocks(root)
+          if (options.afterSuccess != null) {
+            options.afterSuccess(block)
+          }
+        },
+      })
+    },
+    [getBlocks, send]
+  )
+
+  const deleteBlockApi = useCallback(
+    async (
+      block: Block,
+      options: {
+        afterSuccess?: () => void
+      },
+      root: string
+    ) => {
+      return send(block.id, 'delete-block', {
+        api: () => deleteBlock(block.id),
+        cb: async () => {
+          await getBlocks(root)
+          if (options.afterSuccess != null) {
+            options.afterSuccess()
+          }
+        },
+      })
+    },
+    [getBlocks, send]
+  )
+
+  const updateBlockApi = useCallback(
+    async (
+      block: BlockUpdateRequestBody,
+      options: UpdateBlockApiOptions,
+      root: string
+    ) => {
+      const res = await send(block.id, 'update-block', {
+        api: () => updateBlock(block),
+        cb: async (block: Block) => {
+          await getBlocks(root)
+          if (options.afterSuccess != null) {
+            options.afterSuccess(block)
+          }
+        },
+      })
+      return res
+    },
+    [getBlocks, send]
+  )
+
+  return {
+    send,
+    sendingMap,
+    createBlock: createBlockApi,
+    deleteBlock: deleteBlockApi,
+    updateBlock: updateBlockApi,
+  }
+}
diff --git a/src/cloud/lib/hooks/useDocBlocks.ts b/src/cloud/lib/hooks/useDocBlocks.ts
index e6723b0adc..26ddd5274d 100644
--- a/src/cloud/lib/hooks/useDocBlocks.ts
+++ b/src/cloud/lib/hooks/useDocBlocks.ts
@@ -5,17 +5,41 @@ import {
   BlockCreateRequestBody,
   BlockUpdateRequestBody,
 } from '../../api/blocks'
+import {
+  CreateBlockApiOptions,
+  DeleteBlockApiOptions,
+  UpdateBlockApiOptions,
+  useBlocksApi,
+} from './useBlocksApi'
+import { BulkApiActionRes } from '../../../design/lib/hooks/useBulkApi'
 
 type BlockState = { type: 'loading' } | { type: 'loaded'; block: Block }
 
+export type BlockActionCreate = (
+  block: BlockCreateRequestBody,
+  parent: Block,
+  options?: CreateBlockApiOptions
+) => Promise<BulkApiActionRes>
+
+export type BlockActionUpdate = (
+  block: BlockUpdateRequestBody,
+  options?: UpdateBlockApiOptions
+) => Promise<BulkApiActionRes>
+
+export type BlockActionRemove = (
+  block: Block,
+  options?: DeleteBlockApiOptions
+) => Promise<BulkApiActionRes>
+
 export interface BlockActions {
-  create: (block: BlockCreateRequestBody, parent: Block) => Promise<Block>
-  update: (block: BlockUpdateRequestBody) => Promise<Block>
-  remove: (block: Block) => Promise<void>
+  create: BlockActionCreate
+  update: BlockActionUpdate
+  remove: BlockActionRemove
 }
 
 export function useDocBlocks(id: string) {
-  const { observeDocBlocks, create, update, remove } = useBlocks()
+  const { observeDocBlocks } = useBlocks()
+  const { createBlock, updateBlock, deleteBlock, sendingMap } = useBlocksApi()
   const [state, setState] = useState<BlockState>({ type: 'loading' })
 
   useEffect(() => {
@@ -30,14 +54,16 @@ export function useDocBlocks(id: string) {
 
   const actions: BlockActions = useMemo(() => {
     return {
-      create: (block, parent) => create(block, parent, id),
-      update: (block) => update(block, id),
-      remove: (block) => remove(block, id),
+      create: (block, parent, options) =>
+        createBlock(block, parent, options || {}, id),
+      update: (block, options) => updateBlock(block, options || {}, id),
+      remove: (block, options) => deleteBlock(block, options || {}, id),
     }
-  }, [id, create, update, remove])
+  }, [id, createBlock, updateBlock, deleteBlock])
 
   return {
     state,
     actions,
+    sendingMap,
   }
 }
diff --git a/src/cloud/lib/stores/blocks/index.ts b/src/cloud/lib/stores/blocks/index.ts
index 4e15e619e8..3cf5bad8fd 100644
--- a/src/cloud/lib/stores/blocks/index.ts
+++ b/src/cloud/lib/stores/blocks/index.ts
@@ -1,14 +1,6 @@
 import { createStoreContext } from '../../utils/context'
 import { useRef, useCallback } from 'react'
-import {
-  Block,
-  getBlockTree,
-  deleteBlock,
-  updateBlock,
-  createBlock,
-  BlockUpdateRequestBody,
-  BlockCreateRequestBody,
-} from '../../../api/blocks'
+import { Block, getBlockTree } from '../../../api/blocks'
 import { useToast } from '../../../../design/lib/stores/toast'
 
 type BlocksObserver = (blocks: Block) => void
@@ -54,37 +46,9 @@ function useBlocksStore() {
     [getBlocks]
   )
 
-  const create = useCallback(
-    async (body: BlockCreateRequestBody, parent: Block, root: string) => {
-      const block = await createBlock(body, parent.id)
-      await getBlocks(root)
-      return block
-    },
-    [getBlocks]
-  )
-
-  const remove = useCallback(
-    async (block: Block, root: string) => {
-      await deleteBlock(block.id)
-      await getBlocks(root)
-    },
-    [getBlocks]
-  )
-
-  const update = useCallback(
-    async (block: BlockUpdateRequestBody, root: string) => {
-      const updated = await updateBlock(block)
-      await getBlocks(root)
-      return updated
-    },
-    [getBlocks]
-  )
-
   return {
     observeDocBlocks,
-    create,
-    remove,
-    update,
+    getBlocks,
   }
 }
 
diff --git a/src/cloud/lib/utils/events.ts b/src/cloud/lib/utils/events.ts
index d7f261e102..dbbc4170ab 100644
--- a/src/cloud/lib/utils/events.ts
+++ b/src/cloud/lib/utils/events.ts
@@ -88,3 +88,11 @@ export type MarkdownBlockEventDetails = {
 export const markdownBlockEventEmitter = createCustomEventEmitter<
   MarkdownBlockEventDetails
 >('blocks-markdown')
+
+export type TableBlockEventDetails = {
+  type: string
+  id: string
+}
+export const tableBlockEventEmitter = createCustomEventEmitter<
+  TableBlockEventDetails
+>('blocks-table')
diff --git a/src/design/components/molecules/Navigation/NavigationItem.tsx b/src/design/components/molecules/Navigation/NavigationItem.tsx
index 1c8e7b7a30..d965e5d19a 100644
--- a/src/design/components/molecules/Navigation/NavigationItem.tsx
+++ b/src/design/components/molecules/Navigation/NavigationItem.tsx
@@ -3,7 +3,7 @@ import styled from '../../../lib/styled'
 import { AppComponent, ControlButtonProps } from '../../../lib/types'
 import cc from 'classcat'
 import FoldingWrapper, { FoldingProps } from '../../atoms/FoldingWrapper'
-import Button from '../../atoms/Button'
+import Button, { LoadingButton } from '../../atoms/Button'
 import { mdiChevronDown, mdiChevronRight } from '@mdi/js'
 import { Emoji } from 'emoji-mart'
 import Icon from '../../atoms/Icon'
@@ -135,7 +135,8 @@ const NavItem: AppComponent<
         {controls != null && controls.length > 0 && (
           <div className='navigation__item__controls'>
             {(controls || []).map((control, i) => (
-              <Button
+              <LoadingButton
+                spinning={control.spinning}
                 key={i}
                 variant='icon'
                 iconSize={16}
diff --git a/src/design/lib/hooks/useBulkApi.ts b/src/design/lib/hooks/useBulkApi.ts
index 6eec8242b6..8002c326af 100644
--- a/src/design/lib/hooks/useBulkApi.ts
+++ b/src/design/lib/hooks/useBulkApi.ts
@@ -1,11 +1,15 @@
 import { useCallback, useState } from 'react'
 import { useToast } from '../stores/toast'
 
+export type BulkApiActionRes =
+  | { err: true; error: unknown }
+  | { err: false; data: any }
+
 export type BulkApiAction = (
   id: string,
   act: string,
   body: { api: (args: any) => Promise<any>; cb?: (res: any) => any }
-) => Promise<{ err: boolean; error?: unknown }>
+) => Promise<BulkApiActionRes>
 
 interface UseBulkApiRes {
   sendingMap: Map<string, string>
@@ -18,7 +22,7 @@ const useBulkApi = () => {
 
   const send = useCallback(
     async (id: string, act: string, { api, cb }) => {
-      const res = { err: false, error: undefined }
+      const res = { err: false, error: undefined, data: undefined }
       if (sendingMap.get(id)) {
         return
       }
@@ -31,6 +35,7 @@ const useBulkApi = () => {
       })
       try {
         const data = await api()
+        res.data = data
         if (cb != null) {
           cb(data)
         }
diff --git a/src/design/lib/types.ts b/src/design/lib/types.ts
index dc0f2f3d18..f95863c27d 100644
--- a/src/design/lib/types.ts
+++ b/src/design/lib/types.ts
@@ -3,6 +3,7 @@ export type AppComponent<P> = React.FC<P & { className?: string }>
 export type ControlButtonProps = {
   disabled?: boolean
   active?: boolean
+  spinning?: boolean
   icon: string
   onClick: (event: React.MouseEvent) => void
   onContextMenu?: (event: React.MouseEvent) => void

From a64d45c3591b59c834c8adf406d0c73606ce70f1 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Tue, 7 Sep 2021 12:07:48 +0900
Subject: [PATCH 084/106] cleanup creation dom handler

---
 .../components/Blocks/views/Container.tsx     | 31 ++-----------------
 .../components/Blocks/views/GithubIssue.tsx   | 19 ++----------
 src/cloud/lib/blocks/dom.ts                   | 25 +++++++++++++++
 3 files changed, 30 insertions(+), 45 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Container.tsx b/src/cloud/components/Blocks/views/Container.tsx
index d9c837bbf3..d8716113a9 100644
--- a/src/cloud/components/Blocks/views/Container.tsx
+++ b/src/cloud/components/Blocks/views/Container.tsx
@@ -8,16 +8,11 @@ import {
 } from '../../../api/blocks'
 import styled from '../../../../design/lib/styled'
 import { BlockView, ViewProps } from '.'
-import { getBlockDomId } from '../../../lib/blocks/dom'
+import { domBlockCreationHandler, getBlockDomId } from '../../../lib/blocks/dom'
 import { useModal } from '../../../../design/lib/stores/modal'
 import BlockCreationModal from '../BlockCreationModal'
 import BlockToolbar from '../BlockToolbar'
 import BlockLayout from '../BlockLayout'
-import {
-  markdownBlockEventEmitter,
-  tableBlockEventEmitter,
-} from '../../../lib/utils/events'
-import { sleep } from '../../../../lib/sleep'
 
 interface ContainerViewProps extends ViewProps<ContainerBlock> {
   setCurrentBlock: React.Dispatch<React.SetStateAction<Block | null>>
@@ -37,26 +32,6 @@ const ContainerView = ({
 }: ContainerViewProps) => {
   const { openModal, closeAllModals } = useModal()
 
-  const domBlockCreationHandler = useCallback(
-    async (createdBlock: Block) => {
-      await sleep(100) //rendering delay
-      const blockElem = document.getElementById(getBlockDomId(createdBlock))
-      scrollToElement(blockElem)
-      if (createdBlock.type === 'table') {
-        tableBlockEventEmitter.dispatch({
-          type: 'focus-title',
-          id: createdBlock.id,
-        })
-      } else if (createdBlock.type === 'markdown') {
-        markdownBlockEventEmitter.dispatch({
-          type: 'edit',
-          id: createdBlock.id,
-        })
-      }
-    },
-    [scrollToElement]
-  )
-
   const createBlock = useCallback(
     async (newBlock: BlockCreateRequestBody) => {
       await actions.create(newBlock, block, {
@@ -64,7 +39,7 @@ const ContainerView = ({
           if (canvas.rootBlock.id === block.id) {
             setCurrentBlock(createdBlock)
           }
-          domBlockCreationHandler(createdBlock)
+          domBlockCreationHandler(scrollToElement, createdBlock)
         },
       })
       closeAllModals()
@@ -75,7 +50,7 @@ const ContainerView = ({
       closeAllModals,
       canvas.rootBlock.id,
       setCurrentBlock,
-      domBlockCreationHandler,
+      scrollToElement,
     ]
   )
 
diff --git a/src/cloud/components/Blocks/views/GithubIssue.tsx b/src/cloud/components/Blocks/views/GithubIssue.tsx
index 18613c6e9b..b08af29823 100644
--- a/src/cloud/components/Blocks/views/GithubIssue.tsx
+++ b/src/cloud/components/Blocks/views/GithubIssue.tsx
@@ -19,7 +19,7 @@ import GithubLabelsData from '../data/GithubLabelsData'
 import { useModal } from '../../../../design/lib/stores/modal'
 import DataTypeMenu from '../props/DataTypeMenu'
 import { capitalize } from '../../../lib/utils/string'
-import { getBlockDomId } from '../../../lib/blocks/dom'
+import { domBlockCreationHandler, getBlockDomId } from '../../../lib/blocks/dom'
 import Flexbox from '../../../../design/components/atoms/Flexbox'
 import { ExternalLink } from '../../../../design/components/atoms/Link'
 import BlockCreationModal from '../BlockCreationModal'
@@ -29,9 +29,7 @@ import InfoBlock, {
   InfoBlockRow,
 } from '../../../../design/components/organisms/InfoBlock'
 import BlockLayout from '../BlockLayout'
-import { getTableBlockInputId } from './Table'
 import MetadataContainer from '../../../../design/components/organisms/MetadataContainer'
-import { markdownBlockEventEmitter } from '../../../lib/utils/events'
 import Button from '../../../../design/components/atoms/Button'
 
 const GithubIssueView = ({
@@ -117,20 +115,7 @@ const GithubIssueView = ({
     async (newBlock: BlockCreateRequestBody) => {
       await blockActions.create(newBlock, block, {
         afterSuccess: (createdBlock) => {
-          const blockElem = document.getElementById(getBlockDomId(createdBlock))
-          scrollToElement(blockElem)
-
-          if (createdBlock.type === 'table') {
-            const titleElement = document.getElementById(
-              getTableBlockInputId(createdBlock)
-            )
-            if (titleElement != null) titleElement.focus()
-          } else if (newBlock.type === 'markdown') {
-            markdownBlockEventEmitter.dispatch({
-              type: 'edit',
-              id: createdBlock.id,
-            })
-          }
+          domBlockCreationHandler(scrollToElement, createdBlock)
         },
       })
       closeAllModals()
diff --git a/src/cloud/lib/blocks/dom.ts b/src/cloud/lib/blocks/dom.ts
index d7a9fb4222..92a62bc818 100644
--- a/src/cloud/lib/blocks/dom.ts
+++ b/src/cloud/lib/blocks/dom.ts
@@ -1,5 +1,30 @@
 import { Block } from '../../api/blocks'
+import {
+  markdownBlockEventEmitter,
+  tableBlockEventEmitter,
+} from '../utils/events'
+import { sleep } from '../utils/sleep'
 
 export function getBlockDomId(block: Block) {
   return `${block.id}--block-${block.type}`
 }
+
+export async function domBlockCreationHandler(
+  scrollToElement: (elem: HTMLElement | null) => void,
+  createdBlock: Block
+) {
+  await sleep(100) //rendering delay
+  const blockElem = document.getElementById(getBlockDomId(createdBlock))
+  scrollToElement(blockElem)
+  if (createdBlock.type === 'table') {
+    tableBlockEventEmitter.dispatch({
+      type: 'focus-title',
+      id: createdBlock.id,
+    })
+  } else if (createdBlock.type === 'markdown') {
+    markdownBlockEventEmitter.dispatch({
+      type: 'edit',
+      id: createdBlock.id,
+    })
+  }
+}

From 991a8a7da8fd318490044e7172f0f33c28f3805c Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Tue, 7 Sep 2021 13:01:03 +0900
Subject: [PATCH 085/106] nested removal

---
 src/cloud/api/blocks/index.ts                | 4 ++--
 src/cloud/components/Blocks/BlockContent.tsx | 3 +--
 src/cloud/lib/hooks/useBlocksApi.ts          | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/cloud/api/blocks/index.ts b/src/cloud/api/blocks/index.ts
index e45c56091f..e9f1cc4669 100644
--- a/src/cloud/api/blocks/index.ts
+++ b/src/cloud/api/blocks/index.ts
@@ -69,6 +69,6 @@ export async function updateBlock(
   return block
 }
 
-export async function deleteBlock(id: string) {
-  await callApi(`api/blocks/${id}`, { method: 'delete' })
+export async function deleteBlock(id: string, force?: boolean) {
+  await callApi(`api/blocks/${id}`, { method: 'delete', json: { force } })
 }
diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index 6712c0ada4..d729a6fde3 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -77,14 +77,13 @@ const BlockContent = ({ doc }: BlockContentProps) => {
         })
         if (!res.err) {
           const block = res.data
+          await sleep(100) //rendering delay
           if (block.type === 'markdown') {
-            await sleep(100) //rendering delay
             markdownBlockEventEmitter.dispatch({
               type: 'edit',
               id: block.id,
             })
           } else if (block.type === 'table') {
-            await sleep(100) //rendering delay
             tableBlockEventEmitter.dispatch({
               type: 'focus-title',
               id: block.id,
diff --git a/src/cloud/lib/hooks/useBlocksApi.ts b/src/cloud/lib/hooks/useBlocksApi.ts
index 3cf687207d..a4736ffc9c 100644
--- a/src/cloud/lib/hooks/useBlocksApi.ts
+++ b/src/cloud/lib/hooks/useBlocksApi.ts
@@ -55,7 +55,7 @@ export function useBlocksApi() {
       root: string
     ) => {
       return send(block.id, 'delete-block', {
-        api: () => deleteBlock(block.id),
+        api: () => deleteBlock(block.id, true),
         cb: async () => {
           await getBlocks(root)
           if (options.afterSuccess != null) {

From 1a9cc13564ea27173aa8e39bc7d957c40b34ee02 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Tue, 7 Sep 2021 13:16:24 +0900
Subject: [PATCH 086/106] remove optional nested removal

---
 src/cloud/api/blocks/index.ts       | 4 ++--
 src/cloud/lib/hooks/useBlocksApi.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/cloud/api/blocks/index.ts b/src/cloud/api/blocks/index.ts
index e9f1cc4669..e45c56091f 100644
--- a/src/cloud/api/blocks/index.ts
+++ b/src/cloud/api/blocks/index.ts
@@ -69,6 +69,6 @@ export async function updateBlock(
   return block
 }
 
-export async function deleteBlock(id: string, force?: boolean) {
-  await callApi(`api/blocks/${id}`, { method: 'delete', json: { force } })
+export async function deleteBlock(id: string) {
+  await callApi(`api/blocks/${id}`, { method: 'delete' })
 }
diff --git a/src/cloud/lib/hooks/useBlocksApi.ts b/src/cloud/lib/hooks/useBlocksApi.ts
index a4736ffc9c..3cf687207d 100644
--- a/src/cloud/lib/hooks/useBlocksApi.ts
+++ b/src/cloud/lib/hooks/useBlocksApi.ts
@@ -55,7 +55,7 @@ export function useBlocksApi() {
       root: string
     ) => {
       return send(block.id, 'delete-block', {
-        api: () => deleteBlock(block.id, true),
+        api: () => deleteBlock(block.id),
         cb: async () => {
           await getBlocks(root)
           if (options.afterSuccess != null) {

From bec9e70dde6e2ecd215eb37165d702148c53221d Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Tue, 7 Sep 2021 15:03:35 +0900
Subject: [PATCH 087/106] minor fixes

---
 src/cloud/components/Blocks/BlockContent.tsx      | 15 +++++++++++++--
 src/cloud/components/Blocks/forms/EmbedForm.tsx   |  9 ++++++++-
 .../lib/hooks/sidebar/useCloudSidebarTree.tsx     |  4 +++-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index d729a6fde3..333b815d57 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -4,6 +4,7 @@ import {
   mdiPackageVariantClosed,
   mdiCodeTags,
   mdiFileDocumentOutline,
+  mdiTable,
 } from '@mdi/js'
 import EmbedForm from './forms/EmbedForm'
 import { Block, BlockCreateRequestBody, ContainerBlock } from '../../api/blocks'
@@ -33,6 +34,7 @@ import {
   tableBlockEventEmitter,
 } from '../../lib/utils/events'
 import { sleep } from '../../../lib/sleep'
+import cc from 'classcat'
 
 export interface Canvas extends SerializedDocWithBookmark {
   rootBlock: ContainerBlock
@@ -249,7 +251,7 @@ const BlockContent = ({ doc }: BlockContentProps) => {
                     <Icon path={mdiPlus} size={16} />
                   </Flexbox>
                 }
-                icon={{ type: 'icon', path: mdiPackageVariantClosed }}
+                icon={{ type: 'icon', path: mdiTable }}
               />
               <NavigationItem
                 labelClick={createEmbed}
@@ -270,7 +272,12 @@ const BlockContent = ({ doc }: BlockContentProps) => {
       </UpDownList>
       <div className='block__editor__view'>
         <Scroller
-          className='block__editor__view__wrapper'
+          className={cc([
+            'block__editor__view__wrapper',
+            currentBlock != null &&
+              currentBlock.type === 'embed' &&
+              'block__editor__view__wrapper--padding-less',
+          ])}
           id='block__editor__view__wrapper'
           ref={contentScrollerRef}
         >
@@ -302,6 +309,10 @@ const StyledBlockContent = styled.div`
   flex: 1 1 auto;
   overflow: hidden;
 
+  .block__editor__view__wrapper--padding-less {
+    padding: 0 !important;
+  }
+
   & > .block__editor__nav {
     padding-top: ${({ theme }) => theme.sizes.spaces.df}px;
     display: flex;
diff --git a/src/cloud/components/Blocks/forms/EmbedForm.tsx b/src/cloud/components/Blocks/forms/EmbedForm.tsx
index 61677ee15b..587f25b61e 100644
--- a/src/cloud/components/Blocks/forms/EmbedForm.tsx
+++ b/src/cloud/components/Blocks/forms/EmbedForm.tsx
@@ -82,7 +82,14 @@ function getEmbedURL(url: string) {
       url
     )}`
   }
-  return getEmbedURL
+  const isYoutubeVideoURL = new RegExp(
+    /^(?:https:\/\/)?(?:m.)?(?:www\.)?(?:(?:youtube\.com\/watch\?v=)|(?:youtu.be)\/)([A-z0-9_-]*)/,
+    'gim'
+  ).exec(url)
+  if (isYoutubeVideoURL != null) {
+    return `https://www.youtube.com/embed/${isYoutubeVideoURL[1]}`
+  }
+  return url
 }
 
 export default EmbedForm
diff --git a/src/cloud/lib/hooks/sidebar/useCloudSidebarTree.tsx b/src/cloud/lib/hooks/sidebar/useCloudSidebarTree.tsx
index 2af05b3dc3..2624c24756 100644
--- a/src/cloud/lib/hooks/sidebar/useCloudSidebarTree.tsx
+++ b/src/cloud/lib/hooks/sidebar/useCloudSidebarTree.tsx
@@ -12,6 +12,7 @@ import {
   mdiStarOutline,
   mdiTag,
   mdiTrashCanOutline,
+  mdiPaletteOutline,
 } from '@mdi/js'
 import { FoldingProps } from '../../../../design/components/atoms/FoldingWrapper'
 import { SidebarDragState } from '../../../../design/lib/dnd'
@@ -484,7 +485,8 @@ export function useCloudSidebarTree() {
         label: getDocTitle(doc, 'Untitled'),
         bookmarked: doc.bookmarked,
         emoji: doc.emoji,
-        defaultIcon: mdiFileDocumentOutline,
+        defaultIcon:
+          doc.rootBlock != null ? mdiPaletteOutline : mdiFileDocumentOutline,
         status: doc.status,
         hidden:
           doc.archivedAt != null ||

From 16d287a0fcf84dc01fb4c55168e623a3047451fe Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Tue, 7 Sep 2021 15:17:15 +0900
Subject: [PATCH 088/106] github issue block

---
 .../components/Blocks/views/GithubIssue.tsx   | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/cloud/components/Blocks/views/GithubIssue.tsx b/src/cloud/components/Blocks/views/GithubIssue.tsx
index b08af29823..60d9e5a2b4 100644
--- a/src/cloud/components/Blocks/views/GithubIssue.tsx
+++ b/src/cloud/components/Blocks/views/GithubIssue.tsx
@@ -31,6 +31,7 @@ import InfoBlock, {
 import BlockLayout from '../BlockLayout'
 import MetadataContainer from '../../../../design/components/organisms/MetadataContainer'
 import Button from '../../../../design/components/atoms/Button'
+import { StyledUserIcon } from '../../UserIcon'
 
 const GithubIssueView = ({
   block,
@@ -155,6 +156,17 @@ const GithubIssueView = ({
           <h1>{block.data.title}</h1>
         </Flexbox>
         <InfoBlock className='github-issue__view__info'>
+          {block.data.repository != null &&
+            block.data.repository.organization != null && (
+              <InfoBlockRow label='Organization'>
+                <ExternalLink
+                  showIcon={true}
+                  href={block.data.repository.organization.html_url}
+                >
+                  {block.data.repository.organization.login}
+                </ExternalLink>
+              </InfoBlockRow>
+            )}
           {htmlURLRegexes.repoUrl != null && (
             <InfoBlockRow label='Repository'>
               <ExternalLink href={htmlURLRegexes.repoUrl[1]} showIcon={true}>
@@ -176,6 +188,16 @@ const GithubIssueView = ({
               </ExternalLink>
             </InfoBlockRow>
           )}
+          {block.data.creator != null && (
+            <InfoBlockRow label='Creator'>
+              <StyledUserIcon className='subtle'>
+                <img
+                  src={block.data.user.avatar_url}
+                  alt={block.data.user.login[0]}
+                />
+              </StyledUserIcon>
+            </InfoBlockRow>
+          )}
           <InfoBlockRow label='Assignees'>
             <GitHubAssigneesData data={block.data} onUpdate={updateBlock} />
           </InfoBlockRow>
@@ -185,6 +207,11 @@ const GithubIssueView = ({
           <InfoBlockRow label='Labels'>
             <GithubLabelsData data={block.data} onUpdate={updateBlock} />
           </InfoBlockRow>
+          {block.data.body != null && block.data.body.trim() !== '' && (
+            <InfoBlockRow label='Body'>
+              <div className='github-issue__body'>{block.data.body}</div>{' '}
+            </InfoBlockRow>
+          )}
           {props.map(([key, value]) => {
             return (
               <InfoBlockRow label={getPropName(key)} key={`custom-${key}`}>
@@ -256,6 +283,14 @@ const StyledGithubIssueView = styled.div`
     margin: 0;
   }
 
+  .github-issue__body {
+    padding: ${({ theme }) => theme.sizes.spaces.xsm}px
+      ${({ theme }) => theme.sizes.spaces.sm}px;
+    background: ${({ theme }) => theme.colors.background.secondary};
+    white-space: break-spaces;
+    display: block;
+  }
+
   .github-issue__view__title .icon {
     margin-right: ${({ theme }) => theme.sizes.spaces.sm}px;
   }

From 9ec3962a7e630f222049736bd9d194406a95b689 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Tue, 7 Sep 2021 15:31:26 +0900
Subject: [PATCH 089/106] block editor view

---
 src/cloud/components/Blocks/BlockContent.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index 333b815d57..ef7b3be520 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -330,6 +330,8 @@ const StyledBlockContent = styled.div`
     flex: 1 1 auto;
     height: 100%;
     position: relative;
+    width: 100%;
+    overflow: hidden;
   }
 
   & .block__editor__view__wrapper {

From 06f4bb0477895e30fc4f2b31ad6e5583fe41d84f Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Wed, 8 Sep 2021 09:36:46 +0900
Subject: [PATCH 090/106] CR set duplicate

---
 src/cloud/components/Blocks/forms/GithubIssueForm.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
index 30c6b2d85f..dd8e6c5e59 100644
--- a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
+++ b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
@@ -353,12 +353,13 @@ const GithubIssueSelector = ({
   const toggleIssue = useCallback((issue: Issue) => {
     return () => {
       setSelectedIssues((old) => {
-        if (!old.has(issue)) {
-          old.add(issue)
+        const newSet = new Set(old)
+        if (!newSet.has(issue)) {
+          newSet.add(issue)
         } else {
-          old.delete(issue)
+          newSet.delete(issue)
         }
-        return new Set(old)
+        return newSet
       })
     }
   }, [])

From cb6c9ee1a89adec11edc4948776b2dde41ffd2e0 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Wed, 8 Sep 2021 10:27:34 +0900
Subject: [PATCH 091/106] page creation in top level

---
 src/cloud/components/Blocks/BlockContent.tsx  | 116 +++---------------
 .../components/Blocks/views/Markdown.tsx      |   1 -
 2 files changed, 17 insertions(+), 100 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index ef7b3be520..a296c5c97b 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -1,12 +1,5 @@
 import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react'
-import {
-  mdiPlus,
-  mdiPackageVariantClosed,
-  mdiCodeTags,
-  mdiFileDocumentOutline,
-  mdiTable,
-} from '@mdi/js'
-import EmbedForm from './forms/EmbedForm'
+import { mdiPlus, mdiPackageVariantClosed } from '@mdi/js'
 import { Block, BlockCreateRequestBody, ContainerBlock } from '../../api/blocks'
 import { useDocBlocks } from '../../lib/hooks/useDocBlocks'
 import { SerializedDocWithBookmark } from '../../interfaces/db/doc'
@@ -51,7 +44,7 @@ interface BlockContentProps {
 const BlockContent = ({ doc }: BlockContentProps) => {
   const { currentUserIsCoreMember } = usePage()
   const { state, actions, sendingMap } = useDocBlocks(doc.rootBlock.id)
-  const { openModal, closeAllModals } = useModal()
+  const { closeAllModals } = useModal()
   const [currentBlock, setCurrentBlock] = useState<Block | null>(null)
   const [provider] = useRealtime({
     token: doc.collaborationToken || '',
@@ -110,15 +103,6 @@ const BlockContent = ({ doc }: BlockContentProps) => {
     }
   }, [state])
 
-  const createMarkdown = useCallback(() => {
-    return createBlock({
-      name: 'Markdown',
-      type: 'markdown',
-      children: [],
-      data: null,
-    })
-  }, [createBlock])
-
   const createContainer = useCallback(() => {
     return createBlock({
       name: 'Page',
@@ -128,22 +112,8 @@ const BlockContent = ({ doc }: BlockContentProps) => {
     })
   }, [createBlock])
 
-  const createTable = useCallback(() => {
-    return createBlock({
-      name: '',
-      type: 'table',
-      children: [],
-      data: { columns: {} },
-    })
-  }, [createBlock])
-
-  const createEmbed = useCallback(() => {
-    openModal(<EmbedForm onSubmit={createBlock} />)
-  }, [createBlock, openModal])
-
   const {
     sideBarOpenedBlocksIdsSet,
-    sideBarOpenedLinksIdsSet,
     toggleItem,
     unfoldItem,
     foldItem,
@@ -201,73 +171,21 @@ const BlockContent = ({ doc }: BlockContentProps) => {
           ))}
         </Scroller>
         <div className='block__editor__nav--actions'>
-          <NavigationItem
-            labelClick={
-              getFoldEvents('links', 'block__editor-actions', true).toggle
-            }
-            className='block__editor__nav--item'
-            id='block__editor__nav--new-items'
-            folded={!sideBarOpenedLinksIdsSet.has('block__editor-actions')}
-            folding={getFoldEvents('links', 'block__editor-actions', true)}
-            depth={0}
-            label='New Blocks'
-          />
-          {sideBarOpenedLinksIdsSet.has('block__editor-actions') && (
-            <>
-              <NavigationItem
-                labelClick={createContainer}
-                className='block__editor__nav--item'
-                id='block__editor__nav--container'
-                depth={1}
-                label={
-                  <Flexbox alignItems='center' justifyContent='space-between'>
-                    <span>Page</span>
-                    <Icon path={mdiPlus} size={16} />
-                  </Flexbox>
-                }
-                icon={{ type: 'icon', path: mdiPackageVariantClosed }}
-              />
-              <NavigationItem
-                labelClick={createMarkdown}
-                className='block__editor__nav--item'
-                id='block__editor__nav--markdown'
-                depth={1}
-                label={
-                  <Flexbox alignItems='center' justifyContent='space-between'>
-                    <span>Markdown</span>
-                    <Icon path={mdiPlus} size={16} />
-                  </Flexbox>
-                }
-                icon={{ type: 'icon', path: mdiFileDocumentOutline }}
-              />
-              <NavigationItem
-                labelClick={createTable}
-                className='block__editor__nav--item'
-                id='block__editor__nav--table'
-                depth={1}
-                label={
-                  <Flexbox alignItems='center' justifyContent='space-between'>
-                    <span>Table</span>
-                    <Icon path={mdiPlus} size={16} />
-                  </Flexbox>
-                }
-                icon={{ type: 'icon', path: mdiTable }}
-              />
-              <NavigationItem
-                labelClick={createEmbed}
-                className='block__editor__nav--item'
-                id='block__editor__nav--embed'
-                depth={1}
-                label={
-                  <Flexbox alignItems='center' justifyContent='space-between'>
-                    <span>Embed</span>
-                    <Icon path={mdiPlus} size={16} />
-                  </Flexbox>
-                }
-                icon={{ type: 'icon', path: mdiCodeTags }}
-              />
-            </>
-          )}
+          <>
+            <NavigationItem
+              labelClick={createContainer}
+              className='block__editor__nav--item'
+              id='block__editor__nav--container'
+              depth={1}
+              label={
+                <Flexbox alignItems='center' justifyContent='space-between'>
+                  <span>New Page</span>
+                  <Icon path={mdiPlus} size={16} />
+                </Flexbox>
+              }
+              icon={{ type: 'icon', path: mdiPackageVariantClosed }}
+            />
+          </>
         </div>
       </UpDownList>
       <div className='block__editor__view'>
diff --git a/src/cloud/components/Blocks/views/Markdown.tsx b/src/cloud/components/Blocks/views/Markdown.tsx
index 32990f856d..013acef0a2 100644
--- a/src/cloud/components/Blocks/views/Markdown.tsx
+++ b/src/cloud/components/Blocks/views/Markdown.tsx
@@ -96,7 +96,6 @@ const MarkdownView = ({
       if (detail.id !== block.id) {
         return
       }
-      console.log('got event')
 
       switch (detail.type) {
         case 'edit':

From 285ea3358696dcdd692de0adac903cde0f786ecd Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Wed, 8 Sep 2021 10:27:41 +0900
Subject: [PATCH 092/106] hoverable lines in block nav

---
 src/cloud/components/Blocks/BlockContent.tsx | 10 ++--------
 src/cloud/components/Blocks/BlockTree.tsx    | 15 +++++++++++++++
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index a296c5c97b..5f81af9071 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -5,7 +5,6 @@ import { useDocBlocks } from '../../lib/hooks/useDocBlocks'
 import { SerializedDocWithBookmark } from '../../interfaces/db/doc'
 import { useModal } from '../../../design/lib/stores/modal'
 import BlockTree from './BlockTree'
-import Icon from '../../../design/components/atoms/Icon'
 import styled from '../../../design/lib/styled'
 import { find } from '../../../design/lib/utils/tree'
 import useRealtime from '../../lib/editor/hooks/useRealtime'
@@ -13,7 +12,6 @@ import { BlockView } from './views'
 import Scroller from '../../../design/components/atoms/Scroller'
 import UpDownList from '../../../design/components/atoms/UpDownList'
 import NavigationItem from '../../../design/components/molecules/Navigation/NavigationItem'
-import Flexbox from '../../../design/components/atoms/Flexbox'
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
 import { useToast } from '../../../design/lib/stores/toast'
 import { usePage } from '../../lib/stores/pageStore'
@@ -176,13 +174,9 @@ const BlockContent = ({ doc }: BlockContentProps) => {
               labelClick={createContainer}
               className='block__editor__nav--item'
               id='block__editor__nav--container'
+              defaultIcon={mdiPlus}
               depth={1}
-              label={
-                <Flexbox alignItems='center' justifyContent='space-between'>
-                  <span>New Page</span>
-                  <Icon path={mdiPlus} size={16} />
-                </Flexbox>
-              }
+              label={'New Page'}
               icon={{ type: 'icon', path: mdiPackageVariantClosed }}
             />
           </>
diff --git a/src/cloud/components/Blocks/BlockTree.tsx b/src/cloud/components/Blocks/BlockTree.tsx
index fcdbccacc4..59a6c31089 100644
--- a/src/cloud/components/Blocks/BlockTree.tsx
+++ b/src/cloud/components/Blocks/BlockTree.tsx
@@ -47,6 +47,7 @@ const BlockTree = ({
       <NavigationItem
         folded={showFoldEvents ? root.folded : undefined}
         folding={showFoldEvents ? root.folding : undefined}
+        className='block__editor__nav--item'
         id={`${idPrefix}-block-${root.id}`}
         label={blockTitle(root)}
         active={active && root.id === active.id}
@@ -89,6 +90,18 @@ const StyledBlockTree = styled.div<{ depth: number }>`
   position: relative;
   width: 100%;
 
+  &.block__editor__nav--tree-root {
+    &:hover {
+      &::before,
+      .block__tree::before {
+        opacity: 1 !important;
+      }
+      .block__editor__nav--item::before {
+        opacity: 1 !important;
+      }
+    }
+  }
+
   &.block__editor__nav--tree {
     &::before {
       content: '';
@@ -101,6 +114,7 @@ const StyledBlockTree = styled.div<{ depth: number }>`
       z-index: 1;
       pointer-events: none;
       filter: brightness(120%);
+      opacity: 0;
     }
   }
 
@@ -116,6 +130,7 @@ const StyledBlockTree = styled.div<{ depth: number }>`
       z-index: 1;
       pointer-events: none;
       filter: brightness(120%);
+      opacity: 0;
     }
   }
 `

From 028ef330b39216ab2b94ddcfe9252bd581416c86 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Wed, 8 Sep 2021 12:01:31 +0900
Subject: [PATCH 093/106] fix block icon and events

---
 src/cloud/components/Blocks/BlockContent.tsx  | 49 ++++++-------------
 .../components/Blocks/props/DataTypeMenu.tsx  | 17 +++++++
 .../components/Blocks/views/Markdown.tsx      | 19 +++----
 .../Blocks/views/Table/ColumnSettings.tsx     |  7 +--
 .../components/Blocks/views/Table/index.tsx   | 16 +++---
 src/cloud/lib/blocks/dom.ts                   | 21 +++-----
 src/cloud/lib/utils/events.ts                 | 20 +++-----
 7 files changed, 65 insertions(+), 84 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index 5f81af9071..cb61072877 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react'
-import { mdiPlus, mdiPackageVariantClosed } from '@mdi/js'
+import { mdiPlus } from '@mdi/js'
 import { Block, BlockCreateRequestBody, ContainerBlock } from '../../api/blocks'
 import { useDocBlocks } from '../../lib/hooks/useDocBlocks'
 import { SerializedDocWithBookmark } from '../../interfaces/db/doc'
@@ -13,17 +13,13 @@ import Scroller from '../../../design/components/atoms/Scroller'
 import UpDownList from '../../../design/components/atoms/UpDownList'
 import NavigationItem from '../../../design/components/molecules/Navigation/NavigationItem'
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'
-import { useToast } from '../../../design/lib/stores/toast'
 import { usePage } from '../../lib/stores/pageStore'
 import {
   CollapsableType,
   useSidebarCollapse,
 } from '../../lib/stores/sidebarCollapse'
 import { FoldingProps } from '../../../design/components/atoms/FoldingWrapper'
-import {
-  markdownBlockEventEmitter,
-  tableBlockEventEmitter,
-} from '../../lib/utils/events'
+import { blockEventEmitter } from '../../lib/utils/events'
 import { sleep } from '../../../lib/sleep'
 import cc from 'classcat'
 
@@ -44,12 +40,11 @@ const BlockContent = ({ doc }: BlockContentProps) => {
   const { state, actions, sendingMap } = useDocBlocks(doc.rootBlock.id)
   const { closeAllModals } = useModal()
   const [currentBlock, setCurrentBlock] = useState<Block | null>(null)
+  const contentScrollerRef = useRef<OverlayScrollbarsComponent>(null)
   const [provider] = useRealtime({
     token: doc.collaborationToken || '',
     id: doc.id,
   })
-  const { pushApiErrorMessage } = useToast()
-  const contentScrollerRef = useRef<OverlayScrollbarsComponent>(null)
 
   const scrollToElement = useCallback((elem: HTMLElement | null) => {
     if (elem != null && contentScrollerRef.current != null) {
@@ -62,33 +57,22 @@ const BlockContent = ({ doc }: BlockContentProps) => {
 
   const createBlock = useCallback(
     async (block: BlockCreateRequestBody) => {
-      try {
-        const res = await actions.create(block, doc.rootBlock, {
-          afterSuccess: (block) => {
-            setCurrentBlock(block)
-          },
+      const res = await actions.create(block, doc.rootBlock)
+
+      if (!res.err) {
+        const block = res.data
+        setCurrentBlock(block)
+        await sleep(100) //rendering delay
+        blockEventEmitter.dispatch({
+          event: 'creation',
+          blockType: block.type,
+          blockId: block.id,
         })
-        if (!res.err) {
-          const block = res.data
-          await sleep(100) //rendering delay
-          if (block.type === 'markdown') {
-            markdownBlockEventEmitter.dispatch({
-              type: 'edit',
-              id: block.id,
-            })
-          } else if (block.type === 'table') {
-            tableBlockEventEmitter.dispatch({
-              type: 'focus-title',
-              id: block.id,
-            })
-          }
-        }
+
         closeAllModals()
-      } catch (error) {
-        pushApiErrorMessage(error)
       }
     },
-    [doc, actions, closeAllModals, pushApiErrorMessage]
+    [doc, actions, closeAllModals]
   )
 
   useEffect(() => {
@@ -174,10 +158,9 @@ const BlockContent = ({ doc }: BlockContentProps) => {
               labelClick={createContainer}
               className='block__editor__nav--item'
               id='block__editor__nav--container'
-              defaultIcon={mdiPlus}
               depth={1}
               label={'New Page'}
-              icon={{ type: 'icon', path: mdiPackageVariantClosed }}
+              icon={{ type: 'icon', path: mdiPlus }}
             />
           </>
         </div>
diff --git a/src/cloud/components/Blocks/props/DataTypeMenu.tsx b/src/cloud/components/Blocks/props/DataTypeMenu.tsx
index 11b5297aa3..922dda8520 100644
--- a/src/cloud/components/Blocks/props/DataTypeMenu.tsx
+++ b/src/cloud/components/Blocks/props/DataTypeMenu.tsx
@@ -87,3 +87,20 @@ const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => {
 }
 
 export default DataTypeMenu
+
+export function getBlockPropertyIconByType(type: string) {
+  switch (type) {
+    case 'number':
+      return mdiText
+    case 'date':
+      return mdiCalendarOutline
+    case 'user':
+      return mdiAccountCircleOutline
+    case 'url':
+      return mdiLink
+    case 'checkbox':
+      return mdiCheckboxMarkedOutline
+    default:
+      return mdiText
+  }
+}
diff --git a/src/cloud/components/Blocks/views/Markdown.tsx b/src/cloud/components/Blocks/views/Markdown.tsx
index 013acef0a2..6856e63172 100644
--- a/src/cloud/components/Blocks/views/Markdown.tsx
+++ b/src/cloud/components/Blocks/views/Markdown.tsx
@@ -11,10 +11,7 @@ import { mdiEyeOutline, mdiPencil, mdiTrashCanOutline } from '@mdi/js'
 import { getBlockDomId } from '../../../lib/blocks/dom'
 import cc from 'classcat'
 import BlockLayout from '../BlockLayout'
-import {
-  MarkdownBlockEventDetails,
-  markdownBlockEventEmitter,
-} from '../../../lib/utils/events'
+import { blockEventEmitter, BlockEventDetails } from '../../../lib/utils/events'
 
 const MarkdownView = ({
   block,
@@ -92,23 +89,21 @@ const MarkdownView = ({
   }, [mode])
 
   useEffect(() => {
-    const handler = ({ detail }: CustomEvent<MarkdownBlockEventDetails>) => {
-      if (detail.id !== block.id) {
+    const handler = ({ detail }: CustomEvent<BlockEventDetails>) => {
+      if (detail.blockId !== block.id || detail.blockType !== block.type) {
         return
       }
 
-      switch (detail.type) {
-        case 'edit':
+      switch (detail.event) {
+        case 'creation':
           setMode('editor')
           return
-        case 'view':
-          setMode('view')
         default:
           return
       }
     }
-    markdownBlockEventEmitter.listen(handler)
-    return () => markdownBlockEventEmitter.unlisten(handler)
+    blockEventEmitter.listen(handler)
+    return () => blockEventEmitter.unlisten(handler)
   }, [block])
 
   return (
diff --git a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
index ab2ed7217e..21e74c60fd 100644
--- a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
@@ -1,5 +1,4 @@
 import {
-  mdiAccountCircleOutline,
   mdiArrowLeftBold,
   mdiArrowRightBold,
   mdiTrashCanOutline,
@@ -26,7 +25,9 @@ import {
   makeDataPropCol,
 } from '../../../../lib/blocks/table'
 import { capitalize } from '../../../../lib/utils/string'
-import DataTypeMenu from '../../props/DataTypeMenu'
+import DataTypeMenu, {
+  getBlockPropertyIconByType,
+} from '../../props/DataTypeMenu'
 
 interface ColumnSettingsProps {
   col: Column
@@ -118,7 +119,7 @@ const ColumnSettings = ({
                 type: 'button',
                 props: {
                   label: capitalize(dataType),
-                  iconPath: mdiAccountCircleOutline,
+                  iconPath: getBlockPropertyIconByType(dataType),
                   onClick: openTypeSelector,
                   id: 'column-setting-type',
                 },
diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
index cc51c72ccb..e3b5cd7624 100644
--- a/src/cloud/components/Blocks/views/Table/index.tsx
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -39,8 +39,8 @@ import { blockTitle } from '../../../../lib/utils/blocks'
 import BlockIcon from '../../BlockIcon'
 import NavigationItem from '../../../../../design/components/molecules/Navigation/NavigationItem'
 import {
-  TableBlockEventDetails,
-  tableBlockEventEmitter,
+  BlockEventDetails,
+  blockEventEmitter,
 } from '../../../../lib/utils/events'
 
 type GithubCellProps = BlockDataProps<TableBlock['children'][number]>
@@ -184,21 +184,21 @@ const TableView = ({
   }, [block])
 
   useEffect(() => {
-    const handler = ({ detail }: CustomEvent<TableBlockEventDetails>) => {
-      if (detail.id !== block.id) {
+    const handler = ({ detail }: CustomEvent<BlockEventDetails>) => {
+      if (detail.blockId !== block.id || detail.blockType !== block.type) {
         return
       }
 
-      switch (detail.type) {
-        case 'focus-title':
+      switch (detail.event) {
+        case 'creation':
           titleInputRef.current?.focus()
           return
         default:
           return
       }
     }
-    tableBlockEventEmitter.listen(handler)
-    return () => tableBlockEventEmitter.unlisten(handler)
+    blockEventEmitter.listen(handler)
+    return () => blockEventEmitter.unlisten(handler)
   }, [block])
 
   const anchorId = `block__${block.id}__table`
diff --git a/src/cloud/lib/blocks/dom.ts b/src/cloud/lib/blocks/dom.ts
index 92a62bc818..6eff5b0e57 100644
--- a/src/cloud/lib/blocks/dom.ts
+++ b/src/cloud/lib/blocks/dom.ts
@@ -1,8 +1,5 @@
 import { Block } from '../../api/blocks'
-import {
-  markdownBlockEventEmitter,
-  tableBlockEventEmitter,
-} from '../utils/events'
+import { blockEventEmitter } from '../utils/events'
 import { sleep } from '../utils/sleep'
 
 export function getBlockDomId(block: Block) {
@@ -16,15 +13,9 @@ export async function domBlockCreationHandler(
   await sleep(100) //rendering delay
   const blockElem = document.getElementById(getBlockDomId(createdBlock))
   scrollToElement(blockElem)
-  if (createdBlock.type === 'table') {
-    tableBlockEventEmitter.dispatch({
-      type: 'focus-title',
-      id: createdBlock.id,
-    })
-  } else if (createdBlock.type === 'markdown') {
-    markdownBlockEventEmitter.dispatch({
-      type: 'edit',
-      id: createdBlock.id,
-    })
-  }
+  blockEventEmitter.dispatch({
+    blockId: createdBlock.id,
+    blockType: createdBlock.type,
+    event: 'creation',
+  })
 }
diff --git a/src/cloud/lib/utils/events.ts b/src/cloud/lib/utils/events.ts
index dbbc4170ab..3cdc2ab7bd 100644
--- a/src/cloud/lib/utils/events.ts
+++ b/src/cloud/lib/utils/events.ts
@@ -81,18 +81,12 @@ export const toggleSettingsMembersEventEmitter = createCustomEventEmitter(
   'toggle-settings-members'
 )
 
-export type MarkdownBlockEventDetails = {
-  type: string
-  id: string
+export type BlockEventDetails = {
+  blockId: string
+  blockType: 'markdown' | 'embed' | 'table' | 'container' | 'github.issue'
+  event: 'creation'
 }
-export const markdownBlockEventEmitter = createCustomEventEmitter<
-  MarkdownBlockEventDetails
->('blocks-markdown')
 
-export type TableBlockEventDetails = {
-  type: string
-  id: string
-}
-export const tableBlockEventEmitter = createCustomEventEmitter<
-  TableBlockEventDetails
->('blocks-table')
+export const blockEventEmitter = createCustomEventEmitter<BlockEventDetails>(
+  'blocks-events'
+)

From 31ea0e26f89a7a2bfa6eab05468776e339f6348b Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Wed, 8 Sep 2021 12:23:58 +0900
Subject: [PATCH 094/106] container changes and add image

---
 .../Blocks/forms/GithubIssueForm.tsx          |  7 +-
 .../components/Blocks/views/Container.tsx     | 79 ++++++++++++++++++-
 2 files changed, 80 insertions(+), 6 deletions(-)

diff --git a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
index dd8e6c5e59..bb39a562d5 100644
--- a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
+++ b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
@@ -101,7 +101,7 @@ const GithubIssueForm = ({ onSubmit }: FormProps) => {
                   </div>
                 </div>
                 <div className='github-issue__form__integrate__splash'>
-                  <img />
+                  <img src='/static/images/ghintegration.png' />
                 </div>
               </StyledIntegrationManager>
             )
@@ -151,9 +151,8 @@ const StyledIntegrationManager = styled.div`
   }
 
   & .github-issue__form__integrate__splash {
-    background-color: #c4c4c4;
-    height: 300px;
-    width: 400px;
+    max-width: 96%;
+    height: auto;
     & > img {
       width: 100%;
       height: 100%;
diff --git a/src/cloud/components/Blocks/views/Container.tsx b/src/cloud/components/Blocks/views/Container.tsx
index d8716113a9..ffa525cc8c 100644
--- a/src/cloud/components/Blocks/views/Container.tsx
+++ b/src/cloud/components/Blocks/views/Container.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { mdiPlusBoxOutline, mdiTrashCanOutline } from '@mdi/js'
 import EmbedForm from '../forms/EmbedForm'
 import {
@@ -13,6 +13,9 @@ import { useModal } from '../../../../design/lib/stores/modal'
 import BlockCreationModal from '../BlockCreationModal'
 import BlockToolbar from '../BlockToolbar'
 import BlockLayout from '../BlockLayout'
+import FormInput from '../../../../design/components/molecules/Form/atoms/FormInput'
+import { useDebounce } from 'react-use'
+import { BlockEventDetails, blockEventEmitter } from '../../../lib/utils/events'
 
 interface ContainerViewProps extends ViewProps<ContainerBlock> {
   setCurrentBlock: React.Dispatch<React.SetStateAction<Block | null>>
@@ -31,6 +34,8 @@ const ContainerView = ({
   setCurrentBlock,
 }: ContainerViewProps) => {
   const { openModal, closeAllModals } = useModal()
+  const [containerTitle, setContainerTitle] = useState(block.name || '')
+  const titleInputRef = useRef<HTMLInputElement>(null)
 
   const createBlock = useCallback(
     async (newBlock: BlockCreateRequestBody) => {
@@ -87,6 +92,56 @@ const ContainerView = ({
     })
   }, [createBlock, openModal])
 
+  const readyToBeSentRef = useRef<boolean>(false)
+  const onNameChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
+    (e) => {
+      readyToBeSentRef.current = true
+      setContainerTitle(e.target.value)
+    },
+    []
+  )
+  const [, cancel] = useDebounce(
+    async () => {
+      if (readyToBeSentRef.current) {
+        await actions.update({
+          id: block.id,
+          type: block.type,
+          name: containerTitle,
+        })
+        readyToBeSentRef.current = false
+      } else {
+        cancel()
+      }
+    },
+    1000,
+    [containerTitle]
+  )
+
+  useEffect(() => {
+    const handler = ({ detail }: CustomEvent<BlockEventDetails>) => {
+      if (detail.blockId !== block.id || detail.blockType !== block.type) {
+        return
+      }
+
+      switch (detail.event) {
+        case 'creation':
+          if (titleInputRef.current != null) {
+            titleInputRef.current.focus()
+            titleInputRef.current.setSelectionRange(
+              0,
+              titleInputRef.current.value.length
+            )
+          }
+
+          return
+        default:
+          return
+      }
+    }
+    blockEventEmitter.listen(handler)
+    return () => blockEventEmitter.unlisten(handler)
+  }, [block])
+
   const isRootBlock = canvas.rootBlock.id === block.id
 
   return (
@@ -106,7 +161,16 @@ const ContainerView = ({
             : []
         }
       >
-        {!isRootBlock && <h1>{block.name}</h1>}
+        {!isRootBlock && (
+          <FormInput
+            placeholder='Untitled...'
+            value={containerTitle}
+            onChange={onNameChange}
+            className='block__container__title'
+            disabled={!currentUserIsCoreMember}
+            ref={titleInputRef}
+          />
+        )}
       </BlockLayout>
       <div className='block__view__container__content'>
         {!isRootBlock &&
@@ -157,6 +221,17 @@ const ContainerView = ({
 const StyledContainerView = styled.div`
   width: 100%;
 
+  .block__container__title {
+    width: 100%;
+    border: 0;
+    font-size: ${({ theme }) => theme.sizes.fonts.l}px;
+    font-weight: 600;
+
+    &:hover {
+      background: ${({ theme }) => theme.colors.background.secondary};
+    }
+  }
+
   & > & h1 {
     font-size: 5px;
   }

From 3fcdc4eefbd2d6229d1896ec965d62f8a0912bbb Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Wed, 8 Sep 2021 12:35:39 +0900
Subject: [PATCH 095/106] fixes

---
 src/cloud/components/Blocks/BlockContent.tsx    |  2 +-
 src/cloud/components/Blocks/views/Container.tsx | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index cb61072877..33a6f3f3cd 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -87,7 +87,7 @@ const BlockContent = ({ doc }: BlockContentProps) => {
 
   const createContainer = useCallback(() => {
     return createBlock({
-      name: 'Page',
+      name: '',
       type: 'container',
       children: [],
       data: null,
diff --git a/src/cloud/components/Blocks/views/Container.tsx b/src/cloud/components/Blocks/views/Container.tsx
index ffa525cc8c..680c7684cb 100644
--- a/src/cloud/components/Blocks/views/Container.tsx
+++ b/src/cloud/components/Blocks/views/Container.tsx
@@ -36,6 +36,7 @@ const ContainerView = ({
   const { openModal, closeAllModals } = useModal()
   const [containerTitle, setContainerTitle] = useState(block.name || '')
   const titleInputRef = useRef<HTMLInputElement>(null)
+  const containerRef = useRef<string>(block.id)
 
   const createBlock = useCallback(
     async (newBlock: BlockCreateRequestBody) => {
@@ -92,6 +93,12 @@ const ContainerView = ({
     })
   }, [createBlock, openModal])
 
+  useEffect(() => {
+    if (containerRef.current !== block.id) {
+      containerRef.current = block.id
+      setContainerTitle(block.name)
+    }
+  }, [block])
   const readyToBeSentRef = useRef<boolean>(false)
   const onNameChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
     (e) => {
@@ -226,6 +233,9 @@ const StyledContainerView = styled.div`
     border: 0;
     font-size: ${({ theme }) => theme.sizes.fonts.l}px;
     font-weight: 600;
+    padding: ${({ theme }) => theme.sizes.spaces.df}px
+      ${({ theme }) => theme.sizes.spaces.md}px;
+    height: auto;
 
     &:hover {
       background: ${({ theme }) => theme.colors.background.secondary};

From d944d72b9e28b9f896453ad38290b05a3bda9290 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 8 Sep 2021 09:11:17 +0900
Subject: [PATCH 096/106] move back to using uniquely identified columns

---
 src/cloud/lib/blocks/table.ts | 219 ++++++++++++++++++----------------
 1 file changed, 116 insertions(+), 103 deletions(-)

diff --git a/src/cloud/lib/blocks/table.ts b/src/cloud/lib/blocks/table.ts
index a96be2630b..d4edbb2483 100644
--- a/src/cloud/lib/blocks/table.ts
+++ b/src/cloud/lib/blocks/table.ts
@@ -1,12 +1,5 @@
 import { Array as YArray, Map as YMap, Doc as YDoc } from 'yjs'
-import {
-  getPropName,
-  getPropType,
-  isPropKey,
-  makePropKey,
-  PropKey,
-  PropType,
-} from './props'
+import { isPropKey, makePropKey, PropType } from './props'
 import {
   mdiAccountCircleOutline,
   mdiCalendarOutline,
@@ -15,27 +8,32 @@ import {
   mdiLink,
   mdiText,
 } from '@mdi/js'
+import { v4 as uuid } from 'uuid'
+
+interface DataPropCol {
+  prop: string
+  name: string
+}
 
-// eslint-disable-next-line prettier/prettier
-type DataPropCol = `prop:${string}:${string}`
+export interface PropCol {
+  id: string
+  name: string
+  type: PropType
+}
 
-export type Column = PropKey | DataPropCol
+export type Column = PropCol | DataPropCol
 
-export type YTable = YMap<YArray<string> | YMap<string>>
+export type YTable = YArray<Column>
 
 export function getYTable(id: string, doc: YDoc): YTable {
-  return sanitize(doc.getMap(id))
+  return sanitize(doc.getArray(id))
 }
 
 export function addColumn(column: Column, table: YTable): YTable {
   table.doc?.transact(() => {
-    const [columns, excluded] = getStructure(table)
-
-    if (!new Set(column).has(column)) {
-      columns.push([column])
+    if (!contains(column, table)) {
+      table.push([sanitizeColumn(column)])
     }
-
-    excluded.delete(column)
   })
   return table
 }
@@ -46,11 +44,9 @@ export function moveColumn(
   table: YTable
 ): YTable {
   table.doc?.transact(() => {
-    const [columns] = getStructure(table)
-
     let from = -1
-    for (let i = 0; i < columns.length; i++) {
-      if (columns.get(i) === column) {
+    for (let i = 0; i < table.length; i++) {
+      if (eq(table.get(i), column)) {
         from = i
       }
     }
@@ -70,22 +66,28 @@ export function moveColumn(
       return
     }
 
-    columns.delete(from)
-    columns.insert(Math.min(normalizedTarget, columns.length), [column])
+    table.delete(from)
+    table.insert(Math.min(normalizedTarget, table.length), [column])
   })
   return table
 }
 
-export function deleteColumn(column: Column, table: YTable): YTable {
+export function deleteColumn(
+  column: Column,
+  table: YTable,
+  rows: YMap<string>[] = []
+): YTable {
   table.doc?.transact(() => {
-    const [columns, excluded] = getStructure(table)
-    for (let i = 0; i < columns.length; i++) {
-      if (columns.get(i) === column) {
-        columns.delete(i)
+    for (let i = 0; i < table.length; i++) {
+      if (eq(table.get(i), column)) {
+        table.delete(i)
+      }
+    }
+    if (isPropCol(column)) {
+      for (const row of rows) {
+        row.delete(toPropKey(column))
       }
     }
-
-    excluded.set(column, column)
   })
   return table
 }
@@ -97,136 +99,147 @@ export function renameColumn(
   rows: YMap<string>[] = []
 ) {
   table.doc?.transact(() => {
-    const [columns] = getStructure(table)
-    const newKey = isDataPropCol(column)
-      ? makeDataPropCol(name, getDataPropColProp(column))
-      : makePropKey(name, getPropType(column))
+    const newCol = { ...column, name }
 
-    if (isPropKey(column)) {
+    if (isPropCol(column)) {
+      const key = toPropKey(column)
+      const newKey = toPropKey(newCol as PropCol)
       for (const row of rows) {
-        row.set(newKey, row.get(column) || '')
-        row.delete(column)
+        row.set(newKey, row.get(key) || '')
+        row.delete(key)
       }
     }
 
-    for (let i = 0; i < columns.length; i++) {
-      if (columns.get(i) === column) {
-        columns.delete(i)
-        columns.insert(i, [newKey])
-      }
-    }
+    updateColumn(newCol, table)
   })
   return table
 }
 
 export function setColumnType(
-  column: PropKey,
+  column: PropCol,
   type: PropType,
   table: YTable,
   rows: YMap<string>[] = []
 ): YTable {
   table.doc?.transact(() => {
-    const [columns] = getStructure(table)
-    const newKey = makePropKey(getPropName(column), type)
+    const newCol = { ...column, type }
+    const newKey = toPropKey(newCol)
+    const oldKey = toPropKey(column)
     for (const row of rows) {
       row.set(newKey, '')
-      row.delete(column)
+      row.delete(oldKey)
     }
 
-    for (let i = 0; i < columns.length; i++) {
-      if (columns.get(i) === column) {
-        columns.delete(i)
-        columns.insert(i, [newKey])
-      }
-    }
+    updateColumn(newCol, table)
   })
 
   return table
 }
 
-export function getActiveColumns(
-  table: YTable,
-  additional: Column[] = []
-): Column[] {
-  const [columns, excluded] = getStructure(table)
-  return columns
-    .toArray()
-    .concat(additional.filter(notIn(new Set(columns))))
-    .filter(notIn(new Set(excluded.keys())))
-    .filter(isColumn)
+export function updateColumn(column: Column, yarr: YArray<Column>) {
+  for (let i = 0; i < yarr.length; i++) {
+    if (eq(yarr.get(i), column)) {
+      yarr.delete(i)
+      yarr.insert(i, [column])
+    }
+  }
+  return yarr
 }
 
-export function sanitize(table: YTable) {
-  const [columns, excluded] = getStructure(table)
-
+export function sanitize(columns: YTable) {
   for (let i = columns.length - 1; i >= 0; i--) {
     if (!isColumn(columns.get(i))) {
+      const item = columns.get(1)
+      if (item instanceof YArray) {
+        console.log(item.toArray())
+      }
+      console.log('removing', item)
       columns.delete(i)
     }
   }
 
-  for (const key of excluded.keys()) {
-    if (!isColumn(key)) {
-      excluded.delete(key)
-    }
-  }
-
-  return table
+  return columns
 }
 
-function getStructure(table: YTable): [YArray<string>, YMap<string>] {
-  let cols = table.get('columns')
-  if (!(cols instanceof YArray)) {
-    table.set('columns', new YArray())
-    cols = table.get('columns')
-  }
-
-  let excluded = table.get('excluded')
-  if (!(excluded instanceof YMap)) {
-    table.set('excluded', new YMap())
-    excluded = table.get('excluded')
-  }
+function sanitizeColumn(col: Column): Column {
+  return isDataPropCol(col)
+    ? makeDataPropCol(col.name, col.prop)
+    : { id: col.id, name: col.name, type: col.type }
+}
 
-  return [cols as YArray<string>, excluded as YMap<string>]
+export function toArray(ytable: YTable): Column[] {
+  return ytable.toArray()
 }
 
 export function getColumnName(col: Column): string {
-  return isDataPropCol(col) ? getDataPropColName(col) : getPropName(col)
+  return col.name
 }
 
 export function makeDataPropCol(name: string, prop: string): DataPropCol {
-  return `prop:${name}:${prop}`
+  return { name, prop }
+}
+
+export function makePropCol(name: string, type: PropType): PropCol {
+  return { id: uuid(), name, type }
 }
 
-export function isColumn(str: any): str is Column {
-  return isDataPropCol(str) || isPropKey(str)
+export function isColumn(item: any): item is Column {
+  return isDataPropCol(item) || isPropCol(item)
 }
 
-export function isDataPropCol(str: any): str is DataPropCol {
+export function isPropCol(item: any): item is PropCol {
   return (
-    typeof str === 'string' &&
-    str.startsWith('prop:') &&
-    str.split(':').length === 3
+    item != null && typeof item.id === 'string' && typeof item.name === 'string'
+  )
+}
+
+export function isDataPropCol(item: any): item is DataPropCol {
+  return (
+    item != null &&
+    typeof item.prop === 'string' &&
+    typeof item.name === 'string'
   )
 }
 
 export function getDataPropColName(col: DataPropCol): string {
-  return col.split(':')[1]
+  return col.name
 }
 
 export function getDataPropColProp(col: DataPropCol): string {
-  return col.split(':')[2]
+  return col.prop
+}
+
+export function getColType(col: DataPropCol): 'prop'
+export function getColType(col: PropCol): PropType
+export function getColType(col: Column): 'prop' | PropType
+export function getColType(col: any): any {
+  return isDataPropCol(col) ? 'prop' : col.type
 }
 
-function notIn<T>(set: Set<T>) {
-  return (item: T) => !set.has(item)
+export function toPropKey(col: PropCol) {
+  return makePropKey(col.name, col.type)
+}
+
+export function eq(col1: Column, col2: Column): boolean {
+  return isPropCol(col1)
+    ? isPropCol(col2) && col1.id === col2.id
+    : isDataPropCol(col2) && col1.prop === col2.prop
+}
+
+function contains(col: Column, yarr: YArray<Column>) {
+  for (const item of yarr) {
+    if (eq(col, item)) {
+      return true
+    }
+  }
+  return false
 }
 
-function getColType(col: Column): 'prop' | PropType {
-  return isDataPropCol(col) ? 'prop' : col.split(':')[1] as PropType
+export function uniqueIdentifier(col: Column) {
+  return isPropCol(col) ? col.id : col.prop
 }
 
-export function getDataColumnIcon(col: Column) { 
+export function getDataColumnIcon(col: Column) {
   const type = getColType(col)
   switch (type) {
     case 'prop':

From c0553f152d4a7a6d709929a10b9cc4774cd8c14b Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 8 Sep 2021 09:11:29 +0900
Subject: [PATCH 097/106] update hook with newer api

---
 src/cloud/lib/hooks/useBlockTable.ts | 145 ++++++++++++++++++---------
 1 file changed, 99 insertions(+), 46 deletions(-)

diff --git a/src/cloud/lib/hooks/useBlockTable.ts b/src/cloud/lib/hooks/useBlockTable.ts
index 8adf14aea9..3289b163ad 100644
--- a/src/cloud/lib/hooks/useBlockTable.ts
+++ b/src/cloud/lib/hooks/useBlockTable.ts
@@ -2,32 +2,53 @@ import { Doc as YDoc } from 'yjs'
 import { useEffect, useMemo, useState } from 'react'
 import { TableBlock } from '../../api/blocks'
 import { AbstractType, YMap } from 'yjs/dist/src/internals'
-import { isPropKey, PropKey, PropType } from '../blocks/props'
+import {
+  getPropName,
+  getPropType,
+  isPropKey,
+  PropKey,
+  PropType,
+} from '../blocks/props'
 import {
   addColumn,
   Column,
   deleteColumn,
-  getActiveColumns,
   getYTable,
-  isColumn,
+  isPropCol,
+  makePropCol,
   moveColumn,
+  PropCol,
   renameColumn,
   setColumnType,
+  toArray,
+  toPropKey,
   YTable,
 } from '../blocks/table'
+import { uniq } from 'ramda'
+
+interface PlaceholderPropCol extends PropCol {
+  isPlaceholder: true
+}
 
 export interface Actions {
-  addColumn: (key: Column) => void
-  deleteColumn: (key: Column) => void
-  renameColumn: (key: Column, name: string) => void
-  moveColumn: (key: Column, direction: 'left' | 'right') => void
-  setColumnType: (key: PropKey, type: PropType) => void
-  setCell: (row: string, col: Column, data: string) => void
+  addColumn: (key: Column | PlaceholderPropCol) => void
+  deleteColumn: (key: Column | PlaceholderPropCol) => void
+  renameColumn: (key: Column | PlaceholderPropCol, name: string) => void
+  moveColumn: (
+    key: Column | PlaceholderPropCol,
+    direction: 'left' | 'right'
+  ) => void
+  setColumnType: (key: PropCol | PlaceholderPropCol, type: PropType) => void
+  setCell: (
+    row: string,
+    col: PropCol | PlaceholderPropCol,
+    data: string
+  ) => void
 }
 
-interface BlockState {
-  columns: Column[]
-  rowData: Map<string, Record<Column, string>>
+export interface BlockState {
+  columns: (Column | PlaceholderPropCol)[]
+  rowData: Map<string, Record<PropKey, string>>
 }
 
 export function useBlockTable(block: TableBlock, ydoc: YDoc) {
@@ -41,15 +62,15 @@ export function useBlockTable(block: TableBlock, ydoc: YDoc) {
     return buildActions(ytable, yrows)
   }, [ytable, yrows])
   const [state, setState] = useState<BlockState>(() => {
-    const rowData = Array.from(yrows).map<[string, Record<string, string>]>(
-      ([id, map]) => [id, ymapToPropMap(map)]
+    const rowData = new Map(
+      Array.from(yrows).map<[string, Record<string, string>]>(([id, map]) => [
+        id,
+        ymapToPropMap(map),
+      ])
     )
     return {
-      columns: getActiveColumns(
-        ytable,
-        getAvailableKeys(rowData.map(([, map]) => map))
-      ),
-      rowData: new Map(rowData),
+      columns: mergeAdditional(toArray(ytable), Array.from(rowData.values())),
+      rowData,
     }
   })
 
@@ -58,9 +79,9 @@ export function useBlockTable(block: TableBlock, ydoc: YDoc) {
       setState((prev) => {
         return {
           ...prev,
-          columns: getActiveColumns(
-            ytable,
-            getAvailableKeys(Array.from(prev.rowData.values()))
+          columns: mergeAdditional(
+            toArray(ytable),
+            Array.from(prev.rowData.values())
           ),
         }
       })
@@ -71,16 +92,14 @@ export function useBlockTable(block: TableBlock, ydoc: YDoc) {
     const unsubscribes = Array.from(yrows).map(([id, map]) =>
       subscribe(map, () => {
         setState((prev) => {
-          const newProps = Array.from(map.keys())
-            .filter(notIn(new Set<string>(prev.columns)))
-            .filter(isColumn)
           const newMap = new Map(prev.rowData)
-          newMap.set(id, ymapToPropMap(map))
+          const newProps = ymapToPropMap(map)
+          newMap.set(id, newProps)
           return {
-            columns:
-              newProps.length > 0
-                ? prev.columns.concat(newProps)
-                : prev.columns,
+            columns: mergeAdditional(
+              prev.columns.filter(not(isPlaceholder)),
+              Array.from(newMap.values())
+            ),
             rowData: newMap,
           }
         })
@@ -100,29 +119,75 @@ export function useBlockTable(block: TableBlock, ydoc: YDoc) {
   }
 }
 
+function mergeAdditional(
+  cols: Column[],
+  rowData: Record<string, string>[]
+): Column[] {
+  const tableColsSet = new Set(cols.filter(isPropCol).map(toPropKey))
+
+  const additional = rowData
+    .flatMap(keys)
+    .filter(isPropKey)
+    .filter((key) => !tableColsSet.has(key))
+    .map(propToPlaceholder)
+
+  return cols.concat(additional)
+}
+
+function keys<T extends Record<string, any>>(record: T): (keyof T)[] {
+  return Object.keys(record)
+}
+
+function propToPlaceholder(prop: PropKey): PlaceholderPropCol {
+  return {
+    ...makePropCol(getPropName(prop), getPropType(prop)),
+    isPlaceholder: true,
+  }
+}
+
 function buildActions(
   ytable: YTable,
   rows: Map<string, YMap<string>>
 ): Actions {
   return {
     addColumn: (key) => addColumn(key, ytable),
-    deleteColumn: (key) => deleteColumn(key, ytable),
+    deleteColumn: (key) => {
+      deleteColumn(key, ytable, Array.from(rows.values()))
+    },
     renameColumn: (key, name) => {
+      if (isPlaceholder(key)) {
+        addColumn(key, ytable)
+      }
       renameColumn(key, name, ytable, Array.from(rows.values()))
     },
-    moveColumn: (key, direction) => moveColumn(direction, key, ytable),
+    moveColumn: (key, direction) => {
+      if (isPlaceholder(key)) {
+        addColumn(key, ytable)
+      }
+      moveColumn(direction, key, ytable)
+    },
     setColumnType: (key, type) => {
+      if (isPlaceholder(key)) {
+        addColumn(key, ytable)
+      }
       setColumnType(key, type, ytable, Array.from(rows.values()))
     },
     setCell: (row, key, value) => {
-      console.log(row, key, value)
       if (rows.has(row)) {
-        rows.get(row)!.set(key, value)
+        rows.get(row)!.set(toPropKey(key), value)
       }
     },
   }
 }
 
+function isPlaceholder(col: any): col is PlaceholderPropCol {
+  return col.isPlaceholder != null && col.isPlaceholder === true
+}
+
+function not<T>(fn: (...args: T[]) => boolean) {
+  return (...args: T[]) => !fn(...args)
+}
+
 function subscribe<T extends AbstractType<any>>(
   map: T,
   fn: ArgsType<T['observe']>[0]
@@ -139,20 +204,8 @@ function subscribeDeep<T extends AbstractType<any>>(
   return () => map.unobserveDeep(fn)
 }
 
-function getAvailableKeys(maps: Record<string, string>[]): PropKey[] {
-  return Array.from(
-    new Set(
-      maps.flatMap((map) => Array.from(Object.keys(map)).filter(isPropKey))
-    )
-  )
-}
-
 function ymapToPropMap(map: YMap<string>): Record<PropKey, string> {
   return Object.fromEntries(
     Array.from(map.entries()).filter(([key]) => isPropKey(key))
   )
 }
-
-function notIn<T>(set: Set<T>) {
-  return (item: T) => !set.has(item)
-}

From dabe1c68bc15db701c598253679c6795da0de71e Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 8 Sep 2021 09:11:52 +0900
Subject: [PATCH 098/106] update ui with newer api

---
 .../Blocks/views/Table/ColumnSettings.tsx     | 50 ++++++++-----------
 .../Blocks/views/Table/TableSettings.tsx      |  3 +-
 .../components/Blocks/views/Table/index.tsx   | 17 +++++--
 3 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
index 21e74c60fd..fe0135c6d0 100644
--- a/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/ColumnSettings.tsx
@@ -10,19 +10,12 @@ import MetadataContainerBreak from '../../../../../design/components/organisms/M
 import MetadataContainerRow from '../../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
 import { useModal } from '../../../../../design/lib/stores/modal'
 import styled from '../../../../../design/lib/styled'
-import {
-  getPropType,
-  isPropKey,
-  makePropKey,
-  PropKey,
-  PropType,
-} from '../../../../lib/blocks/props'
+import { PropType } from '../../../../lib/blocks/props'
 import {
   Column,
-  getColumnName,
-  getDataPropColProp,
-  isDataPropCol,
-  makeDataPropCol,
+  getColType,
+  isPropCol,
+  PropCol,
 } from '../../../../lib/blocks/table'
 import { capitalize } from '../../../../lib/utils/string'
 import DataTypeMenu, {
@@ -32,7 +25,7 @@ import DataTypeMenu, {
 interface ColumnSettingsProps {
   col: Column
   setColName: (col: Column, name: string) => void
-  setColDataType: (col: PropKey, type: PropType) => void
+  setColDataType: (col: PropCol, type: PropType) => void
   deleteCol: (col: Column) => void
   moveColumn: (col: Column, direction: 'left' | 'right') => void
 }
@@ -44,37 +37,34 @@ const ColumnSettings = ({
   deleteCol,
   moveColumn,
 }: ColumnSettingsProps) => {
-  const [colKey, setColKey] = useState(col)
-  const [name, setName] = useState(getColumnName(col))
+  const [colInternal, setColInternal] = useState(col)
   const { openContextModal, closeAllModals } = useModal()
 
   const onChange: React.ChangeEventHandler<HTMLInputElement> = useCallback(
     (ev) => {
-      setName(ev.target.value)
-      setColName(colKey, ev.target.value)
-      setColKey(
-        isDataPropCol(colKey)
-          ? makeDataPropCol(ev.target.value, getDataPropColProp(colKey))
-          : makePropKey(ev.target.value, getPropType(colKey))
-      )
+      const newName = ev.target.value
+      setColName(colInternal, newName)
+      setColInternal((col) => {
+        return { ...col, name: newName }
+      })
     },
-    [colKey, setColName]
+    [colInternal, setColName]
   )
 
   useEffect(() => {
-    setColKey(col)
+    setColInternal(col)
   }, [col])
 
   const openTypeSelector: React.MouseEventHandler = useCallback(
     (ev) => {
-      if (isPropKey(colKey)) {
+      if (isPropCol(colInternal)) {
         openContextModal(
           ev,
           <MetadataContainer>
             <DataTypeMenu
               onSelect={(type) => {
-                setColDataType(colKey, type)
-                setColKey(makePropKey(name, type))
+                setColDataType(colInternal, type)
+                setColInternal({ ...colInternal, type })
                 closeAllModals()
               }}
             />
@@ -83,19 +73,19 @@ const ColumnSettings = ({
         )
       }
     },
-    [name, colKey, closeAllModals, openContextModal, setColDataType]
+    [colInternal, closeAllModals, openContextModal, setColDataType]
   )
 
   const dataType = useMemo(() => {
-    return isDataPropCol(colKey) ? 'prop' : getPropType(colKey)
-  }, [colKey])
+    return getColType(colInternal)
+  }, [colInternal])
 
   return (
     <MetadataContainer>
       <Container>
         <MetadataContainerRow row={{ type: 'header', content: 'NAME' }} />
         <FormInput
-          value={name}
+          value={colInternal.name}
           onChange={onChange}
           id='column-input-setting'
           onKeyDown={(ev) => {
diff --git a/src/cloud/components/Blocks/views/Table/TableSettings.tsx b/src/cloud/components/Blocks/views/Table/TableSettings.tsx
index 94cde0ebc2..0595835c11 100644
--- a/src/cloud/components/Blocks/views/Table/TableSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/TableSettings.tsx
@@ -10,6 +10,7 @@ import {
   getDataPropColProp,
   isDataPropCol,
   makeDataPropCol,
+  makePropCol,
 } from '../../../../lib/blocks/table'
 import { capitalize } from '../../../../lib/utils/string'
 import DataTypeMenu from '../../props/DataTypeMenu'
@@ -68,7 +69,7 @@ const TableSettings = ({
 
   const insertColumn = useCallback(
     (type: PropType) => {
-      addColumn(makePropKey(capitalize(type), type), true)
+      addColumn(makePropCol(capitalize(type), type), true)
     },
     [addColumn]
   )
diff --git a/src/cloud/components/Blocks/views/Table/index.tsx b/src/cloud/components/Blocks/views/Table/index.tsx
index e3b5cd7624..099f02d918 100644
--- a/src/cloud/components/Blocks/views/Table/index.tsx
+++ b/src/cloud/components/Blocks/views/Table/index.tsx
@@ -13,6 +13,9 @@ import {
   getDataPropColProp,
   isDataPropCol,
   getDataColumnIcon,
+  uniqueIdentifier,
+  toPropKey,
+  getColType,
 } from '../../../../lib/blocks/table'
 import GitHubAssigneesData from '../../data/GithubAssigneesData'
 import GithubStatusData from '../../data/GithubStatusData'
@@ -26,7 +29,6 @@ import Icon from '../../../../../design/components/atoms/Icon'
 import styled from '../../../../../design/lib/styled'
 import { StyledUserIcon } from '../../../UserIcon'
 import { BlockDataProps } from '../../data/types'
-import { getPropType } from '../../../../lib/blocks/props'
 import { useBlockTable } from '../../../../lib/hooks/useBlockTable'
 import BlockProp from '../../props'
 import Scroller from '../../../../../design/components/atoms/Scroller'
@@ -237,7 +239,10 @@ const TableView = ({
                 <tr>
                   <th>Title</th>
                   {state.columns.map((col) => (
-                    <th key={col} className='block__table__view--interactable'>
+                    <th
+                      key={uniqueIdentifier(col)}
+                      className='block__table__view--interactable'
+                    >
                       <button onClick={(ev) => openColumnSettings(ev, col)}>
                         <Flexbox alignItems='center'>
                           <Icon
@@ -284,7 +289,7 @@ const TableView = ({
                         </Flexbox>
                       </td>
                       {state.columns.map((col) => (
-                        <td key={col}>
+                        <td key={uniqueIdentifier(col)}>
                           {isDataPropCol(col) ? (
                             <GithubCell
                               prop={getDataPropColProp(col)}
@@ -296,9 +301,11 @@ const TableView = ({
                           ) : (
                             <BlockProp
                               currentUserIsCoreMember={currentUserIsCoreMember}
-                              type={getPropType(col)}
+                              type={getColType(col)}
                               value={
-                                (state.rowData.get(child.id) || {})[col] || ''
+                                (state.rowData.get(child.id) || {})[
+                                  toPropKey(col)
+                                ] || ''
                               }
                               onChange={(val) =>
                                 tableActions.setCell(child.id, col, val)

From 59c0126104fec3cb4e1e7698bad003b0f1487fa0 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 8 Sep 2021 10:50:37 +0900
Subject: [PATCH 099/106] remove unused imports

---
 src/cloud/components/Blocks/views/Table/TableSettings.tsx | 2 +-
 src/cloud/lib/blocks/table.ts                             | 2 +-
 src/cloud/lib/hooks/useBlockTable.ts                      | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/cloud/components/Blocks/views/Table/TableSettings.tsx b/src/cloud/components/Blocks/views/Table/TableSettings.tsx
index 0595835c11..bddf0ce8f9 100644
--- a/src/cloud/components/Blocks/views/Table/TableSettings.tsx
+++ b/src/cloud/components/Blocks/views/Table/TableSettings.tsx
@@ -4,7 +4,7 @@ import MetadataContainer from '../../../../../design/components/organisms/Metada
 import MetadataContainerBreak from '../../../../../design/components/organisms/MetadataContainer/atoms/MetadataContainerBreak'
 import MetadataContainerRow from '../../../../../design/components/organisms/MetadataContainer/molecules/MetadataContainerRow'
 import styled from '../../../../../design/lib/styled'
-import { makePropKey, PropType } from '../../../../lib/blocks/props'
+import { PropType } from '../../../../lib/blocks/props'
 import {
   Column,
   getDataPropColProp,
diff --git a/src/cloud/lib/blocks/table.ts b/src/cloud/lib/blocks/table.ts
index d4edbb2483..06ec2abf20 100644
--- a/src/cloud/lib/blocks/table.ts
+++ b/src/cloud/lib/blocks/table.ts
@@ -1,5 +1,5 @@
 import { Array as YArray, Map as YMap, Doc as YDoc } from 'yjs'
-import { isPropKey, makePropKey, PropType } from './props'
+import { makePropKey, PropType } from './props'
 import {
   mdiAccountCircleOutline,
   mdiCalendarOutline,
diff --git a/src/cloud/lib/hooks/useBlockTable.ts b/src/cloud/lib/hooks/useBlockTable.ts
index 3289b163ad..4b7c9c78e9 100644
--- a/src/cloud/lib/hooks/useBlockTable.ts
+++ b/src/cloud/lib/hooks/useBlockTable.ts
@@ -24,7 +24,6 @@ import {
   toPropKey,
   YTable,
 } from '../blocks/table'
-import { uniq } from 'ramda'
 
 interface PlaceholderPropCol extends PropCol {
   isPlaceholder: true

From 6991c5a711412af289ae5a7ed5de71d59ba44130 Mon Sep 17 00:00:00 2001
From: Simon Leigh <sleigh.dev@gmail.com>
Date: Wed, 8 Sep 2021 15:14:59 +0900
Subject: [PATCH 100/106] handle block events

---
 src/cloud/components/EventSource.tsx |  8 ++++++++
 src/cloud/interfaces/db/appEvents.ts |  3 +++
 src/cloud/lib/stores/blocks/index.ts | 26 +++++++++++++++++++++++---
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/cloud/components/EventSource.tsx b/src/cloud/components/EventSource.tsx
index 8ad4598fe3..e9a78d32e8 100644
--- a/src/cloud/components/EventSource.tsx
+++ b/src/cloud/components/EventSource.tsx
@@ -20,6 +20,7 @@ import { getUniqueFolderAndDocIdsFromResourcesIds } from '../lib/utils/patterns'
 import { getAccessToken, useElectron } from '../lib/stores/electron'
 import { useNotifications } from '../../design/lib/stores/notifications'
 import { useComments } from '../lib/stores/comments'
+import { useBlocks } from '../lib/stores/blocks'
 
 interface EventSourceProps {
   teamId: string
@@ -67,6 +68,7 @@ const EventSource = ({ teamId }: EventSourceProps) => {
   } = useGlobalData()
   const { commentsEventListener } = useComments()
   const { notificationsEventListener } = useNotifications()
+  const { blockEventListener } = useBlocks()
 
   const setupEventSource = useCallback(
     (url: string) => {
@@ -452,6 +454,11 @@ const EventSource = ({ teamId }: EventSourceProps) => {
           case 'notificationViewed':
             notificationsEventListener(event)
             break
+          case 'blockCreated':
+          case 'blockDeleted':
+          case 'blockUpdated':
+            blockEventListener(event)
+            break
         }
         updateAppEventsMap([event.id, event])
       }
@@ -474,6 +481,7 @@ const EventSource = ({ teamId }: EventSourceProps) => {
     smartFolderDeleteHandler,
     updateAppEventsMap,
     notificationsEventListener,
+    blockEventListener,
   ])
 
   return null
diff --git a/src/cloud/interfaces/db/appEvents.ts b/src/cloud/interfaces/db/appEvents.ts
index cc6dd42c39..c4e4486edf 100644
--- a/src/cloud/interfaces/db/appEvents.ts
+++ b/src/cloud/interfaces/db/appEvents.ts
@@ -35,6 +35,9 @@ export type SseEventType =
   | 'smartFolderDelete'
   | 'notificationCreated'
   | 'notificationViewed'
+  | 'blockCreated'
+  | 'blockUpdated'
+  | 'blockDeleted'
 
 export interface SerializableAppEventProps {
   id: string
diff --git a/src/cloud/lib/stores/blocks/index.ts b/src/cloud/lib/stores/blocks/index.ts
index 3cf5bad8fd..c598e7b25c 100644
--- a/src/cloud/lib/stores/blocks/index.ts
+++ b/src/cloud/lib/stores/blocks/index.ts
@@ -1,7 +1,8 @@
 import { createStoreContext } from '../../utils/context'
-import { useRef, useCallback } from 'react'
+import { useRef, useCallback, useEffect } from 'react'
 import { Block, getBlockTree } from '../../../api/blocks'
 import { useToast } from '../../../../design/lib/stores/toast'
+import { SerializedAppEvent } from '../../../interfaces/db/appEvents'
 
 type BlocksObserver = (blocks: Block) => void
 
@@ -11,7 +12,7 @@ function useBlocksStore() {
   const treeObservers = useRef<Map<string, Set<BlocksObserver>>>(new Map())
 
   const getBlocks = useCallback(
-    async (rootBlock: string) => {
+    async (rootBlock: string, suppressError = false) => {
       try {
         const blocks = await getBlockTree(rootBlock)
         treeCache.current.set(rootBlock, blocks)
@@ -21,7 +22,9 @@ function useBlocksStore() {
         }
         return true
       } catch (err) {
-        pushApiErrorMessage(err)
+        if (!suppressError) {
+          pushApiErrorMessage(err)
+        }
         return false
       }
     },
@@ -46,9 +49,26 @@ function useBlocksStore() {
     [getBlocks]
   )
 
+  const getBlocksRef = useRef(getBlocks)
+  useEffect(() => {
+    getBlocksRef.current = getBlocks
+  }, [getBlocks])
+  const blockEventListener = useCallback(async (event: SerializedAppEvent) => {
+    switch (event.type) {
+      case 'blockCreated':
+      case 'blockUpdated':
+      case 'blockDeleted': {
+        if (typeof event.data.rootBlockId === 'string') {
+          getBlocksRef.current(event.data.rootBlockId, true)
+        }
+      }
+    }
+  }, [])
+
   return {
     observeDocBlocks,
     getBlocks,
+    blockEventListener,
   }
 }
 

From f7df9b2522d14977d9126f879ace9ebb20ea7478 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Wed, 8 Sep 2021 21:32:16 +0900
Subject: [PATCH 101/106] data type number + focus new doc input

---
 src/cloud/components/Blocks/BlockContent.tsx  | 66 +++++++++++++++----
 src/cloud/components/Blocks/BlockEditor.tsx   |  1 +
 .../components/Blocks/props/DataTypeMenu.tsx  |  5 +-
 src/cloud/lib/blocks/table.ts                 |  4 +-
 src/cloud/lib/utils/blocks.ts                 |  3 +-
 5 files changed, 63 insertions(+), 16 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index 33a6f3f3cd..0d17f9214c 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -22,6 +22,7 @@ import { FoldingProps } from '../../../design/components/atoms/FoldingWrapper'
 import { blockEventEmitter } from '../../lib/utils/events'
 import { sleep } from '../../../lib/sleep'
 import cc from 'classcat'
+import { useRouter } from '../../lib/router'
 
 export interface Canvas extends SerializedDocWithBookmark {
   rootBlock: ContainerBlock
@@ -33,6 +34,7 @@ export interface FormProps {
 
 interface BlockContentProps {
   doc: Canvas
+  isNew?: boolean
 }
 
 const BlockContent = ({ doc }: BlockContentProps) => {
@@ -130,6 +132,50 @@ const BlockContent = ({ doc }: BlockContentProps) => {
     )
   }, [getFoldEvents, state, sideBarOpenedBlocksIdsSet])
 
+  const { state: routerState } = useRouter()
+  const docIsNew = !!routerState?.new
+  const previousDocRef = useRef<{
+    blockType: 'container' | 'markdown' | 'embed' | 'table' | 'github.issue'
+    blockId: string
+  }>()
+  useEffect(() => {
+    if (state.type === 'loading') {
+      return
+    }
+
+    if (docIsNew && previousDocRef.current?.blockId !== state.block.id) {
+      previousDocRef.current = {
+        blockType: state.block.type,
+        blockId: state.block.id,
+      }
+      if (
+        state.block.children != null &&
+        state.block.children.length > 0 &&
+        state.block.children[0] != null
+      ) {
+        async function focusBlock({
+          type,
+          id,
+        }: {
+          type: 'container' | 'markdown' | 'embed' | 'table' | 'github.issue'
+          id: string
+        }) {
+          await sleep(300).finally(() => {
+            console.log('slept')
+            blockEventEmitter.dispatch({
+              event: 'creation',
+              blockType: type,
+              blockId: id,
+            })
+          })
+
+          console.log('sent event')
+        }
+        focusBlock(state.block.children[0])
+      }
+    }
+  }, [state, docIsNew])
+
   if (state.type === 'loading') {
     return <div>loading</div>
   }
@@ -151,19 +197,15 @@ const BlockContent = ({ doc }: BlockContentProps) => {
               sendingMap={sendingMap}
             />
           ))}
+          <NavigationItem
+            labelClick={createContainer}
+            className='block__editor__nav--item'
+            id='block__editor__nav--container'
+            depth={1}
+            label={'New Page'}
+            icon={{ type: 'icon', path: mdiPlus }}
+          />
         </Scroller>
-        <div className='block__editor__nav--actions'>
-          <>
-            <NavigationItem
-              labelClick={createContainer}
-              className='block__editor__nav--item'
-              id='block__editor__nav--container'
-              depth={1}
-              label={'New Page'}
-              icon={{ type: 'icon', path: mdiPlus }}
-            />
-          </>
-        </div>
       </UpDownList>
       <div className='block__editor__view'>
         <Scroller
diff --git a/src/cloud/components/Blocks/BlockEditor.tsx b/src/cloud/components/Blocks/BlockEditor.tsx
index 84a7880f89..1db647b65d 100644
--- a/src/cloud/components/Blocks/BlockEditor.tsx
+++ b/src/cloud/components/Blocks/BlockEditor.tsx
@@ -20,6 +20,7 @@ interface BlockEditorProps {
 const BlockEditor = ({ doc, team }: BlockEditorProps) => {
   const { openContextModal } = useModal()
   const { currentUserIsCoreMember, permissions = [] } = usePage()
+
   return (
     <ApplicationPage>
       <ApplicationTopbar
diff --git a/src/cloud/components/Blocks/props/DataTypeMenu.tsx b/src/cloud/components/Blocks/props/DataTypeMenu.tsx
index 922dda8520..6022f27ec4 100644
--- a/src/cloud/components/Blocks/props/DataTypeMenu.tsx
+++ b/src/cloud/components/Blocks/props/DataTypeMenu.tsx
@@ -3,6 +3,7 @@ import {
   mdiCalendarOutline,
   mdiCheckboxMarkedOutline,
   mdiLink,
+  mdiNumeric,
   mdiText,
 } from '@mdi/js'
 import React from 'react'
@@ -34,7 +35,7 @@ const DataTypeMenu = ({ onSelect }: DataTypeMenuProps) => {
             id: 'add-data-number',
             label: 'Number',
             onClick: () => onSelect('number'),
-            iconPath: mdiText,
+            iconPath: mdiNumeric,
           },
         }}
       />
@@ -91,7 +92,7 @@ export default DataTypeMenu
 export function getBlockPropertyIconByType(type: string) {
   switch (type) {
     case 'number':
-      return mdiText
+      return mdiNumeric
     case 'date':
       return mdiCalendarOutline
     case 'user':
diff --git a/src/cloud/lib/blocks/table.ts b/src/cloud/lib/blocks/table.ts
index 06ec2abf20..c6404a0f08 100644
--- a/src/cloud/lib/blocks/table.ts
+++ b/src/cloud/lib/blocks/table.ts
@@ -6,6 +6,7 @@ import {
   mdiCheckboxMarkedOutline,
   mdiGithub,
   mdiLink,
+  mdiNumeric,
   mdiText,
 } from '@mdi/js'
 import { v4 as uuid } from 'uuid'
@@ -252,8 +253,9 @@ export function getDataColumnIcon(col: Column) {
       return mdiLink
     case 'checkbox':
       return mdiCheckboxMarkedOutline
-    case 'text':
     case 'number':
+      return mdiNumeric
+    case 'text':
     default:
       return mdiText
   }
diff --git a/src/cloud/lib/utils/blocks.ts b/src/cloud/lib/utils/blocks.ts
index 15caec8d05..0c4164d421 100644
--- a/src/cloud/lib/utils/blocks.ts
+++ b/src/cloud/lib/utils/blocks.ts
@@ -20,9 +20,10 @@ export function blockTitle(block: Block) {
   switch (block.type) {
     case 'github.issue':
       return block.data?.title || 'Github Issue'
+    case 'container':
+      return block.name.trim() === '' ? 'Page' : block.name
     case 'embed':
     case 'table':
-    case 'container':
       return block.name.trim() === '' ? capitalize(block.type) : block.name
     default:
       return capitalize(block.type)

From 44a97148135ee14f687cd751e34e29b214e954a7 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Wed, 8 Sep 2021 21:43:18 +0900
Subject: [PATCH 102/106] remove remnants

---
 src/cloud/components/Blocks/BlockContent.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index 0d17f9214c..3309039627 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -34,7 +34,6 @@ export interface FormProps {
 
 interface BlockContentProps {
   doc: Canvas
-  isNew?: boolean
 }
 
 const BlockContent = ({ doc }: BlockContentProps) => {
@@ -168,8 +167,6 @@ const BlockContent = ({ doc }: BlockContentProps) => {
               blockId: id,
             })
           })
-
-          console.log('sent event')
         }
         focusBlock(state.block.children[0])
       }

From bd7c803fc3e014294997ba5d63b1505e7f5dc41d Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Wed, 8 Sep 2021 21:44:16 +0900
Subject: [PATCH 103/106] remove log

---
 src/cloud/components/Blocks/BlockContent.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/cloud/components/Blocks/BlockContent.tsx b/src/cloud/components/Blocks/BlockContent.tsx
index 3309039627..662efd11c1 100644
--- a/src/cloud/components/Blocks/BlockContent.tsx
+++ b/src/cloud/components/Blocks/BlockContent.tsx
@@ -160,7 +160,6 @@ const BlockContent = ({ doc }: BlockContentProps) => {
           id: string
         }) {
           await sleep(300).finally(() => {
-            console.log('slept')
             blockEventEmitter.dispatch({
               event: 'creation',
               blockType: type,

From 2b8363d395c7abfcde7ac61b2600e6db830e6cbc Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Wed, 8 Sep 2021 21:46:46 +0900
Subject: [PATCH 104/106] maxheight for integration splash art

---
 src/cloud/components/Blocks/forms/GithubIssueForm.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
index bb39a562d5..04319a0c06 100644
--- a/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
+++ b/src/cloud/components/Blocks/forms/GithubIssueForm.tsx
@@ -153,6 +153,8 @@ const StyledIntegrationManager = styled.div`
   & .github-issue__form__integrate__splash {
     max-width: 96%;
     height: auto;
+    max-height: max-content;
+
     & > img {
       width: 100%;
       height: 100%;

From 7640c16997f79a09a37a5cfa429d36b3df0f1718 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Thu, 9 Sep 2021 11:24:01 +0900
Subject: [PATCH 105/106] fix embed naming

---
 src/cloud/components/Blocks/forms/EmbedForm.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/cloud/components/Blocks/forms/EmbedForm.tsx b/src/cloud/components/Blocks/forms/EmbedForm.tsx
index 587f25b61e..2f0e3a6be7 100644
--- a/src/cloud/components/Blocks/forms/EmbedForm.tsx
+++ b/src/cloud/components/Blocks/forms/EmbedForm.tsx
@@ -21,11 +21,21 @@ const EmbedForm = ({ onSubmit }: EmbedFormProps) => {
       event.preventDefault()
       try {
         const nameRegex = new RegExp(
-          /^(?:https?:\/\/)?(?:www\.)?([^\/]*)/,
+          /^(?:https?:\/\/)?(?:www\.)?([^\/?#]+)(?:[\/?#]|$)/,
           'gi'
         )
         const regexResult = nameRegex.exec(url)
-        const name = regexResult != null ? capitalize(regexResult[1]) : 'Embed'
+
+        let name = 'Embed'
+        if (regexResult != null) {
+          let splits = regexResult[1].split('.')
+
+          if (splits.length > 0) {
+            splits = splits.slice(0, -1)
+          }
+
+          name = capitalize(splits.join(''))
+        }
 
         await onSubmit({
           name,

From dd3cf8f424d69758d436dc6daffc581b0e5eff23 Mon Sep 17 00:00:00 2001
From: davy-c <d.castel33@gmail.com>
Date: Thu, 9 Sep 2021 11:27:39 +0900
Subject: [PATCH 106/106] fix naming of canvas

---
 src/cloud/components/buttons/NewDocButton.tsx  |  4 ++--
 src/cloud/lib/hooks/useCloudResourceModals.tsx | 12 +++++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/cloud/components/buttons/NewDocButton.tsx b/src/cloud/components/buttons/NewDocButton.tsx
index 04002977b3..22fe4aabe2 100644
--- a/src/cloud/components/buttons/NewDocButton.tsx
+++ b/src/cloud/components/buttons/NewDocButton.tsx
@@ -6,9 +6,9 @@ import {
 import { useModal } from '../../../design/lib/stores/modal'
 import {
   mdiPencilBoxMultipleOutline,
-  mdiPackageVariantClosed,
   mdiTextBoxPlusOutline,
   mdiPencilBoxOutline,
+  mdiPaletteOutline,
 } from '@mdi/js'
 import React, { useCallback } from 'react'
 import { SerializedTeam } from '../../interfaces/db/team'
@@ -70,7 +70,7 @@ const NewDocButton = ({ team }: { team: SerializedTeam }) => {
           onClick: () => openNewDocModal(),
         },
         {
-          icon: mdiPackageVariantClosed,
+          icon: mdiPaletteOutline,
           type: MenuTypes.Normal,
           label: translate(lngKeys.CreateNewCanvas),
           onClick: () => openNewDocModal(true),
diff --git a/src/cloud/lib/hooks/useCloudResourceModals.tsx b/src/cloud/lib/hooks/useCloudResourceModals.tsx
index ac20782b2d..ce11c7d984 100644
--- a/src/cloud/lib/hooks/useCloudResourceModals.tsx
+++ b/src/cloud/lib/hooks/useCloudResourceModals.tsx
@@ -1,4 +1,8 @@
-import { mdiFileDocumentOutline, mdiFolderOutline } from '@mdi/js'
+import {
+  mdiFileDocumentOutline,
+  mdiFolderOutline,
+  mdiPaletteOutline,
+} from '@mdi/js'
 import React, { useCallback } from 'react'
 import { FormRowProps } from '../../../design/components/molecules/Form/templates/FormRow'
 import EmojiInputForm from '../../../design/components/organisms/EmojiInputForm'
@@ -161,7 +165,7 @@ export function useCloudResourceModals() {
     ) => {
       openModal(
         <EmojiInputForm
-          defaultIcon={mdiFileDocumentOutline}
+          defaultIcon={body.blocks ? mdiPaletteOutline : mdiFileDocumentOutline}
           placeholder={translate(lngKeys.DocTitlePlaceholder)}
           submitButtonProps={{
             label: translate(lngKeys.GeneralCreate),
@@ -196,7 +200,9 @@ export function useCloudResourceModals() {
         />,
         {
           showCloseIcon: true,
-          title: translate(lngKeys.ModalsCreateNewDocument),
+          title: body.blocks
+            ? translate(lngKeys.CreateNewCanvas)
+            : translate(lngKeys.ModalsCreateNewDocument),
         }
       )
     },