Blocks - Beta Feedbacks #2

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
@@ -130,6 +131,47 @@ 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(() => {
+            blockEventEmitter.dispatch({
+              event: 'creation',
+              blockType: type,
+              blockId: id,
+            })
+          })
+        }
+        focusBlock(state.block.children[0])
+      }
+    }
+  }, [state, docIsNew])
+
   if (state.type === 'loading') {
     return <div>loading</div>
   }
@@ -151,19 +193,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

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

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%;

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':

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
   }

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)