Implement drag and drop based order in sidebar for local space

package.json

@@ -133,6 +133,7 @@
     "@stripe/react-stripe-js": "^1.2.0",
     "@stripe/stripe-js": "^1.11.0",
     "@types/react-color": "^3.0.4",
+    "array-move": "^2.2.1",
     "aws-amplify": "^4.0.3",
     "chart.js": "^2.9.4",
     "classcat": "^4.0.2",

src/components/App.tsx

@@ -54,6 +54,7 @@ import CloudIntroModal from './organisms/CloudIntroModal'
 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;
@@ -69,7 +70,7 @@ 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 { setGeneralStatus, generalStatus } = useGeneralStatus()
@@ -82,6 +83,7 @@ const App = () => {
   const routeParams = useRouteParams()
   const { navigate: navigateToStorage } = useStorageRouter()
   const { messageBox } = useDialog()
+  const { pushMessage } = useToast()
 
   useEffectOnce(() => {
     const fetchDesktopGlobalDataOfCloud = async () => {
@@ -208,8 +210,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/organisms/FolderDetail.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/SidebarContainer.tsx

@@ -30,13 +30,11 @@ 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 { AppUser } from '../../shared/lib/mappers/users'
 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'
@@ -293,14 +291,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(() => {
@@ -356,11 +362,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) => {