Implement drag and drop based order in sidebar for local space

Add array move lib
Implemented orderedIds and DnD handling
Add logic for moving note or doc into note target
Add basic Database updates and API for orderedIds changes
Implement ordered IDs initialization in storages
Implement ordered IDs initializatio only in FSNote
Remove excess function from createStore

Updated handling of pouch DB in createStore
Add create note update for parent folder ordered IDs

Fix direct subfolders rather than all for create subfolders function
Add implementation of trash/untrash note workspace orderedIds

Update rename folder to update ordered IDs as well
Implement createNote update of ordered IDs (workspace)
Implement createFolder update of ordered IDs (workspace and parent folders)
Implement folder reordering
Implement moving of folders across different folder
Refactor folder IDs to use real IDs
Initialize real IDs (only FSNoteDB)
Update rename folder so that it handles realIDs updates (previous and new parent folders ordered IDs update)
Refactor code to use root folder instead of workspace ordered Ids
Refactor and update for loading of storages
Some improvements on loading multiple storages and some fails
Add folder realID changing instead of reusing (also previous ordered IDs should be persisted on folder rename)
Add handling of trash/untrash regarding ordered Ids

Some ordered IDs bugfixes

Remove console logs (most of them)
Fix bug with parallel execution and parent folder creation on rename folder upsert folder calls

Remove note id set from local space

Fix bug with hiding items in sidebar (invalid key provided on callback)
Assess some todos

Update storages list data key

Add order ID removal in purge note
Fix sidebar tree ordered IDs handling

Author: Komediruzecki

package-lock.json

@@ -117,6 +117,7 @@
     "@mdi/js": "^5.9.55",
     "@mdi/react": "^1.2.1",
     "@types/react-color": "^3.0.4",
+    "array-move": "^2.2.1",
     "chart.js": "^2.9.4",
     "classcat": "^4.0.2",
     "codemirror": "^5.59.2",

package.json

@@ -21,6 +21,7 @@ import ContextMenu from '../shared/components/molecules/ContextMenu'
 import AppNavigator from './organisms/AppNavigator'
 import Toast from '../shared/components/organisms/Toast'
 import styled from '../shared/lib/styled'
+import { useToast } from '../shared/lib/stores/toast'
 
 const LoadingText = styled.div`
   margin: 30px;
@@ -36,11 +37,12 @@ const AppContainer = styled.div`
 `
 
 const App = () => {
-  const { initialize, storageMap } = useDb()
+  const { initialize, storageMap, getUninitializedStorageData } = useDb()
   const { push, pathname } = useRouter()
   const [initialized, setInitialized] = useState(false)
   const { togglePreferencesModal, preferences } = usePreferences()
   const { navigate: navigateToStorage } = useStorageRouter()
+  const { pushMessage } = useToast()
 
   useEffectOnce(() => {
     initialize()
@@ -60,8 +62,21 @@ const App = () => {
           }
         }
         setInitialized(true)
+
+        // notify on failed initializations
+        const uninitializedStorageData = await getUninitializedStorageData()
+        if (uninitializedStorageData.length > 0) {
+          pushMessage({
+            title: 'Error',
+            description: `Failed to initialize some storages, please check console for more info.`,
+          })
+        }
       })
       .catch((error) => {
+        pushMessage({
+          title: 'Error',
+          description: `Failed to initialize some storages, please check console for more info.`,
+        })
         console.error(error)
       })
   })

src/components/App.tsx

@@ -18,6 +18,7 @@ import {
   selectStyle,
 } from '../../shared/lib/styled/styleFunctions'
 import styled from '../../shared/lib/styled'
+import { NOTE_ID_PREFIX } from '../../lib/db/consts'
 
 interface FolderDetailProps {
   storage: NoteStorage
@@ -46,7 +47,11 @@ const FolderDetail = ({ storage, folderPathname }: FolderDetailProps) => {
       return []
     }
 
-    return [...folder.noteIdSet]
+    return [
+      ...(folder.orderedIds || []).filter((orderId) =>
+        orderId.startsWith(NOTE_ID_PREFIX)
+      ),
+    ]
       .reduce((notes, noteId) => {
         const note = storage.noteMap[noteId]
         if (note != null && !note.trashed) {

src/components/organisms/FolderDetail.tsx

@@ -22,12 +22,10 @@ import { useTranslation } from 'react-i18next'
 import { useSearchModal } from '../../lib/searchModal'
 import styled from '../../shared/lib/styled'
 import cc from 'classcat'
+import { SidebarTreeSortingOrders } from '../../shared/lib/sidebar'
 import { useGeneralStatus } from '../../lib/generalStatus'
 import { useLocalUI } from '../../lib/v2/hooks/local/useLocalUI'
-import {
-  mapTree,
-  SidebarTreeSortingOrders,
-} from '../../lib/v2/mappers/local/sidebarTree'
+import { mapTree } from '../../lib/v2/mappers/local/sidebarTree'
 import { useLocalDB } from '../../lib/v2/hooks/local/useLocalDB'
 import { useLocalDnd } from '../../lib/v2/hooks/local/useLocalDnd'
 import { CollapsableType } from '../../lib/v2/stores/sidebarCollapse'
@@ -275,14 +273,22 @@ const SidebarContainer = ({
   )
 
   const getFoldEvents = useCallback(
-    (type: CollapsableType, key: string) => {
+    (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),
       }
     },
-    [foldItem, unfoldItem, toggleItem]
+    [toggleItem, unfoldItem, foldItem]
   )
 
   const tree = useMemo(() => {
@@ -338,11 +344,13 @@ const SidebarContainer = ({
   const sidebarHeaderControls: SidebarControls = useMemo(() => {
     return {
       'View Options': (tree || []).map((category) => {
+        const key = (category.label || '').toLocaleLowerCase()
+        const hideKey = `hide-${key}`
         return {
           type: 'check',
           label: category.label,
-          checked: !sideBarOpenedLinksIdsSet.has(`hide-${category.label}`),
-          onClick: () => toggleItem('links', `hide-${category.label}`),
+          checked: !sideBarOpenedLinksIdsSet.has(hideKey),
+          onClick: () => toggleItem('links', hideKey),
         }
       }),
       Sorting: Object.values(SidebarTreeSortingOrders).map((sort) => {