Add & Move Blocks In Views

.changeset/fuzzy-shoes-travel.md

@@ -0,0 +1,5 @@
+---
+'mexit-webapp': patch
+---
+
+Move Blocks, Add Blocks In Views Added

apps/webapp/src/App.tsx

@@ -13,6 +13,7 @@ import FloatingButton from './Components/FloatingButton'
 import Init from './Components/Init'
 import Main from './Components/Main'
 import Modals from './Components/Modals'
+import { createViewFilterStore, ViewFilterProvider } from './Hooks/todo/useTodoFilters'
 import { useForceLogout } from './Stores/useAuth'
 import GlobalStyle from './Style/GlobalStyle'
 import Switch from './Switch'
@@ -38,8 +39,10 @@ const AutoThemeSwitch = () => {
 const Providers: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <Provider legacySupport={false}>
-      <AutoThemeSwitch />
-      {children}
+      <ViewFilterProvider createStore={createViewFilterStore}>
+        <AutoThemeSwitch />
+        {children}
+      </ViewFilterProvider>
     </Provider>
   )
 }

apps/webapp/src/Components/CreateTodoModal/TaskEditor/styled.tsx

@@ -4,8 +4,14 @@ import { CheckBoxWrapper, EditorStyles } from '@mexit/shared'
 
 import { ModalSection } from '../../../Style/Refactor'
 
-export const TaskEditorWrapper = styled.section`
-  padding: ${({ theme }) => theme.spacing.small};
+export const TaskEditorWrapper = styled.section<{ withMaxHeight?: boolean }>`
+  padding: ${({ theme }) => theme.spacing.medium};
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  background: ${({ theme }) => theme.tokens.surfaces.app};
+  margin: ${({ theme }) => theme.spacing.large} 0;
+  ${({ withMaxHeight }) => withMaxHeight && `height: 22vh;`}
+  max-height: 24vh;
+  overflow: hidden auto;
 `
 
 export const TaskEditorStyle = styled(EditorStyles)`
@@ -20,6 +26,7 @@ export const TaskEditorStyle = styled(EditorStyles)`
 
 export const ScrollableModalSection = styled(ModalSection)`
   width: 40vw;
+  min-width: 600px;
   max-height: 50vh;
 
   ${CheckBoxWrapper} {

apps/webapp/src/Components/Editor/Banner/styled.tsx

@@ -15,3 +15,10 @@ export const Group = styled.span`
   align-items: center;
   gap: ${({ theme }) => theme.spacing.small};
 `
+
+export const MediaGroup = styled(Group)`
+  @media (max-width: 1000px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`

apps/webapp/src/Components/Editor/ContentEditor.tsx

@@ -21,7 +21,6 @@ import { EditorWrapper, isOnEditableElement } from '@mexit/shared'
 
 import { useComboboxOpen } from '../../Editor/Hooks/useComboboxOpen'
 import { useApi } from '../../Hooks/API/useNodeAPI'
-import { createViewFilterStore, ViewFilterProvider } from '../../Hooks/todo/useTodoFilters'
 import { useKeyListener } from '../../Hooks/useChangeShortcutListener'
 import { useComments } from '../../Hooks/useComments'
 import { useBufferStore, useEditorBuffer } from '../../Hooks/useEditorBuffer'
@@ -169,18 +168,16 @@ const ContentEditor = () => {
 
   return (
     <EditorWrapper comboboxOpen={isComboOpen} isUserEditing={isUserEditing} ref={editorWrapperRef}>
-      <ViewFilterProvider createStore={createViewFilterStore}>
-        <Editor
-          onAutoSave={onAutoSave}
-          onFocusClick={onFocusClick}
-          includeBlockInfo={true}
-          onChange={onChangeSave}
-          content={nodeContent}
-          nodeUID={nodeid}
-          readOnly={viewOnly}
-          autoFocus={false}
-        />
-      </ViewFilterProvider>
+      <Editor
+        onAutoSave={onAutoSave}
+        onFocusClick={onFocusClick}
+        includeBlockInfo={true}
+        onChange={onChangeSave}
+        content={nodeContent}
+        nodeUID={nodeid}
+        readOnly={viewOnly}
+        autoFocus={false}
+      />
     </EditorWrapper>
   )
 }

apps/webapp/src/Components/FleetContainer/useOnNewItem.tsx

@@ -27,13 +27,6 @@ import { useSnippets } from '../../Hooks/useSnippets'
 import { useTaskFromSelection } from '../../Hooks/useTaskFromSelection'
 
 export const useOnNewItem = () => {
-  const ICONS = {
-    snippet: 'ri:quill-pen-line',
-    note: 'ri:file-list-2-line',
-    space: 'heroicons-outline:view-grid',
-    todo: 'ri:task-line'
-  }
-
   const loadSnippet = useSnippetStore((store) => store.loadSnippet)
   const changeSpace = useUserPreferenceStore((store) => store.setActiveNamespace)
 
@@ -66,6 +59,12 @@ export const useOnNewItem = () => {
     openModal(ModalsType.todo, todo)
   }
 
+  const onNewContent = () => {
+    openModal(ModalsType.todo, {
+      type: 'content'
+    })
+  }
+
   const onNewSnippet = () => {
     const snippetId = generateSnippetId()
     const snippetName = generateName().dashed
@@ -107,12 +106,12 @@ export const useOnNewItem = () => {
       })
   }
 
-  const getQuickNewItems = () => {
+  const getQuickNewItems = (withMIcon = false) => {
     const data = {
       note: {
         id: 0,
         name: 'New Note',
-        icon: ICONS.note,
+        icon: withMIcon ? DefaultMIcons.NOTE : DefaultMIcons.NOTE.value,
         onSelect: () => {
           const activeNamesapce = useUserPreferenceStore.getState().activeNamespace
           const spaceId = activeNamesapce ?? getDefaultNamespaceId()
@@ -123,20 +122,26 @@ export const useOnNewItem = () => {
       space: {
         id: 1,
         name: 'New Space',
-        icon: ICONS.space,
+        icon: withMIcon ? DefaultMIcons.SPACE : DefaultMIcons.SPACE.value,
         onSelect: onNewSpace
       },
       task: {
         id: 2,
         name: 'New Task',
-        icon: ICONS.todo,
+        icon: withMIcon ? DefaultMIcons.TASK : DefaultMIcons.TASK.value,
         onSelect: onNewTask
       },
       snippet: {
         id: 3,
         name: 'New Snippet',
-        icon: ICONS.snippet,
+        icon: withMIcon ? DefaultMIcons.SNIPPET : DefaultMIcons.SNIPPET.value,
         onSelect: onNewSnippet
+      },
+      content: {
+        id: 4,
+        name: 'New Content',
+        icon: withMIcon ? DefaultMIcons.TEXT : DefaultMIcons.TEXT.value,
+        onSelect: onNewContent
       }
     }
 

apps/webapp/src/Components/Modals.tsx

@@ -4,11 +4,10 @@ import BlockModal from '../Editor/Components/Blocks/BlockModal'
 import HelpModal from '../Views/HelpModal'
 
 import ShareModal from './Mentions/ShareModal'
-import CreateTodoModal from './Modals/CreateTodoModal'
+import CreateTodoModal, { CreateNewSection } from './Modals/CreateTodoModal'
 import DeleteSpaceModal from './Modals/DeleteSpaceModal'
 import Lookup from './Modals/Lookup'
 import MangeSpacesModal from './Modals/ManageSpacesModal'
-// import Refactor from './Refactor'
 import Delete from './Refactor/DeleteModal'
 import CreateReminderModal from './Reminders/CreateReminderModal'
 import TemplateModal from './Template/TemplateModal'
@@ -28,7 +27,9 @@ const Modals = () => {
       <BlockModal />
       <ShareModal />
       <CreateReminderModal />
-      <CreateTodoModal />
+      <CreateTodoModal>
+        <CreateNewSection />
+      </CreateTodoModal>
       <TaskViewModal />
       <PreviewNoteModal />
       <MangeSpacesModal />

apps/webapp/src/Components/Modals/CreateTodoModal.tsx

@@ -3,25 +3,36 @@ import toast from 'react-hot-toast'
 import Modal from 'react-modal'
 
 import { getPlateEditorRef, PlateProvider } from '@udecode/plate'
+import { useTheme } from 'styled-components'
 
 import { Button, DisplayShortcut, LoadingButton } from '@workduck-io/mex-components'
 import { tinykeys } from '@workduck-io/tinykeys'
 
-import { ModalsType, mog, useModalStore } from '@mexit/core'
+import { getDefaultContent, ModalsType, mog, useModalStore } from '@mexit/core'
+import { DefaultMIcons, IconDisplay, InsertMenu, PrimaryText } from '@mexit/shared'
 
 import useUpdateBlock from '../../Editor/Hooks/useUpdateBlock'
 import { useApi } from '../../Hooks/API/useNodeAPI'
-import { ModalControls, ModalHeader } from '../../Style/Refactor'
+import { useCreateNewNote } from '../../Hooks/useCreateNewNote'
+import { ModalControls } from '../../Style/Refactor'
 import TaskEditor from '../CreateTodoModal/TaskEditor'
 import { ScrollableModalSection, TaskEditorWrapper } from '../CreateTodoModal/TaskEditor/styled'
+import { Group } from '../Editor/Banner/styled'
+import Editor from '../Editor/Editor'
 
-const CreateTodoModal = () => {
+import { DeletionWarning, Header, Title } from './DeleteSpaceModal/styled'
+
+const CreateTodoModal = ({ children }) => {
   const isOpen = useModalStore((store) => store.open === ModalsType.todo)
   const setOpen = useModalStore((store) => store.toggleOpen)
+  const data = useModalStore((store) => store.data)
   const { addBlockInContent } = useUpdateBlock()
   const setModalData = useModalStore((store) => store.setData)
   const [isLoading, setIsLoading] = useState<boolean>(false)
+  const { createNewNote } = useCreateNewNote()
   const { appendToNode } = useApi()
+  const theme = useTheme()
+  const [selectedNoteId, setSelectedNoteId] = useState<string | undefined>()
 
   const onCreateTask = async () => {
     setIsLoading(true)
@@ -31,8 +42,9 @@ const CreateTodoModal = () => {
     if (openedTodo) {
       try {
         if (todoBlock) {
-          await appendToNode(openedTodo.nodeid, todoBlock)
-          addBlockInContent(openedTodo.nodeid, todoBlock)
+          const noteId = selectedNoteId || openedTodo.nodeid
+          await appendToNode(noteId, todoBlock)
+          addBlockInContent(noteId, todoBlock)
           toast('Task created!')
         }
       } catch (err) {
@@ -45,9 +57,45 @@ const CreateTodoModal = () => {
     }
   }
 
+  const onCreateContent = async () => {
+    setIsLoading(true)
+
+    const content = getPlateEditorRef()?.children
+    try {
+      if (content) {
+        const noteId = selectedNoteId || ''
+        if (selectedNoteId) {
+          await appendToNode(noteId, content)
+          addBlockInContent(noteId, content)
+        } else {
+          createNewNote({
+            noteContent: content,
+            noRedirect: true
+          })
+        }
+        toast('Added Content!')
+      }
+    } catch (err) {
+      toast('Error occured while creating Task')
+      mog('Error occured while creating Task', { err })
+    } finally {
+      setIsLoading(false)
+      setOpen(undefined)
+    }
+  }
+
+  const handleCreate = () => {
+    if (data?.type === 'content') {
+      onCreateContent()
+    } else {
+      onCreateTask()
+    }
+  }
+
   useEffect(() => {
     if (!isOpen) {
       setModalData(undefined)
+      setSelectedNoteId(null)
     }
   }, [isOpen])
 
@@ -77,27 +125,65 @@ const CreateTodoModal = () => {
     setOpen(undefined)
   }
 
+  const isContent = data?.type === 'content'
+  const description = !isContent
+    ? 'By default, new Task is added to Daily Tasks. You can select a different type of note from the menu if you prefer.'
+    : 'By defautl, new Content is saved as Drafts. You can select a different type of note from the menu if you prefer.'
+
   return (
     <Modal
+      shouldFocusAfterRender
+      shouldCloseOnEsc={false}
+      shouldReturnFocusAfterClose
       className={'ModalContentSplit'}
       overlayClassName="ModalOverlay"
       onRequestClose={onRequestClose}
       isOpen={isOpen}
     >
-      <ScrollableModalSection>
-        <ModalHeader>New Task</ModalHeader>
-        <NewTodoSection />
+      <ScrollableModalSection id="menu-wrapper">
+        <Header>
+          <Group>
+            <Title>
+              Add a new&nbsp;
+              <Group>
+                <IconDisplay
+                  icon={isContent ? DefaultMIcons.TEXT : DefaultMIcons.TASK}
+                  size={28}
+                  color={theme.tokens.colors.primary.default}
+                />{' '}
+                <PrimaryText>{isContent ? 'Content' : 'Task'}</PrimaryText>
+              </Group>{' '}
+              ?
+            </Title>
+          </Group>
+        </Header>
+        <DeletionWarning>
+          <Group>
+            <span>{description}</span>
+            <InsertMenu
+              type="modal"
+              initialFocus={false}
+              title="Select Note"
+              selected={selectedNoteId}
+              isMenu
+              onClick={(noteId: string) => {
+                setSelectedNoteId(noteId)
+              }}
+            />
+          </Group>
+        </DeletionWarning>
+        {children}
+
         <ModalControls>
           <Button large onClick={onRequestClose}>
             Cancel
           </Button>
           <LoadingButton
             style={{ marginLeft: '1rem' }}
             primary
-            autoFocus={true}
             large
             loading={isLoading}
-            onClick={onCreateTask}
+            onClick={handleCreate}
             disabled={false}
           >
             Add <DisplayShortcut shortcut={'$mod+Enter'} />
@@ -108,6 +194,29 @@ const CreateTodoModal = () => {
   )
 }
 
+export const CreateNewSection = () => {
+  const data = useModalStore((store) => store.data)
+
+  switch (data?.type) {
+    case 'content':
+      return <NewContentSection />
+    default:
+      return <NewTodoSection />
+  }
+}
+
+const NewContentSection = () => {
+  const content = [getDefaultContent()]
+
+  return (
+    <TaskEditorWrapper withMaxHeight>
+      <PlateProvider id="NODE_EDITOR">
+        <Editor includeBlockInfo={false} content={content} nodeUID="NODE_EDITOR" />
+      </PlateProvider>
+    </TaskEditorWrapper>
+  )
+}
+
 const NewTodoSection = () => {
   const todo = useModalStore((store) => store.data)