mobile: fix reordering in side menu

apps/mobile/app/components/list/reorderable-list.tsx

@@ -125,14 +125,13 @@ function ReorderableList<T extends { id: string }>({
 
   function getOrderedItems() {
     const items: T[] = [];
-    data.forEach((item) => {
-      const index = itemOrderState.indexOf(item?.id);
-      if (index === -1) {
-        items.push(item);
-      } else {
-        items.splice(index, 0, item);
-      }
+    itemOrderState.forEach((id) => {
+      const item = data.find((i) => i.id === id);
+      if (!item) return;
+      items.push(item);
     });
+
+    items.push(...data.filter((i) => !itemOrderState.includes(i.id)));
     return items;
   }
 
@@ -148,6 +147,9 @@ function ReorderableList<T extends { id: string }>({
             hoverDragReleasedStyle: {
               display: "none"
             },
+            hoverDraggingWithoutReceiverStyle: {
+              opacity: 0.5
+            },
             dragReleasedStyle: {
               opacity: 1
             },
@@ -174,6 +176,9 @@ function ReorderableList<T extends { id: string }>({
             setItemsOrder(newOrder);
             onListOrderChanged?.(newOrder);
           }}
+          onItemDragEnd={(e) => {
+            console.log(e.receiver?.receiveOffset);
+          }}
           keyExtractor={(item) => (item as any).id}
         />
       </View>

apps/mobile/app/components/properties/index.js

@@ -35,6 +35,7 @@ import { Items } from "./items";
 import Notebooks from "./notebooks";
 import { Synced } from "./synced";
 import { TagStrip, Tags } from "./tags";
+import { useSideBarDraggingStore } from "../side-menu/dragging-store";
 
 const Line = ({ top = 6, bottom = 6 }) => {
   const { colors } = useThemeColors();
@@ -235,7 +236,12 @@ Properties.present = async (item, buttons = [], isSheet) => {
       break;
     case "color":
       props[0] = await db.colors.color(item.id);
-      props.push(["trash", "rename-color", "reorder"]);
+
+      props.push([
+        "trash",
+        "rename-color",
+        ...(useSideBarDraggingStore.getState().dragging ? [] : ["reorder"])
+      ]);
       break;
     case "reminder": {
       props[0] = await db.reminders.reminder(item.id);

apps/mobile/app/components/side-menu/color-section.tsx

@@ -33,10 +33,11 @@ import { Properties } from "../properties";
 import { PressableButton } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import { useSideBarDraggingStore } from "./dragging-store";
 
 export const ColorSection = React.memo(
   function ColorSection() {
-    const [colorNotes, loadingColors] = useMenuStore((state) => [
+    const [colorNotes] = useMenuStore((state) => [
       state.colorNotes,
       state.loadingColors
     ]);
@@ -78,7 +79,6 @@ export const ColorSection = React.memo(
 const ColorItem = React.memo(
   function ColorItem({ item }: { item: Color }) {
     const { colors, isDark } = useThemeColors();
-    const setColorNotes = useMenuStore((state) => state.setColorNotes);
     const isFocused = useNavigationStore(
       (state) => state.focusedRouteId === item.id
     );
@@ -92,6 +92,7 @@ const ColorItem = React.memo(
     };
 
     const onLongPress = () => {
+      if (useSideBarDraggingStore.getState().dragging) return;
       Properties.present(item);
     };
 

apps/mobile/app/components/side-menu/dragging-store.ts

@@ -18,6 +18,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import create from "zustand";
 
-export const useSideBarDraggingStore = create((set, get) => ({
+export const useSideBarDraggingStore = create(() => ({
   dragging: false
 }));

apps/mobile/app/components/side-menu/index.tsx

@@ -33,6 +33,7 @@ import { SUBSCRIPTION_STATUS } from "../../utils/constants";
 import { eOpenPremiumDialog } from "../../utils/events";
 import { MenuItemsList } from "../../utils/menu-items";
 import ReorderableList from "../list/reorderable-list";
+import { Button } from "../ui/button";
 import { ColorSection } from "./color-section";
 import { useSideBarDraggingStore } from "./dragging-store";
 import { MenuItem } from "./menu-item";
@@ -80,6 +81,7 @@ export const SideMenu = React.memo(
         eSendEvent(eOpenPremiumDialog);
       }
     };
+
     const renderItem = useCallback(
       () => (
         <>
@@ -173,14 +175,44 @@ export const SideMenu = React.memo(
             )}
           </View>
 
-          <View
-            style={{
-              width: "100%",
-              paddingHorizontal: 0
-            }}
-          >
-            <UserStatus />
-          </View>
+          {dragging ? (
+            <View
+              style={{
+                paddingHorizontal: 12
+              }}
+            >
+              <Button
+                type="grayAccent"
+                style={{
+                  flexDirection: "row",
+                  borderRadius: 5,
+                  marginBottom: 12,
+                  justifyContent: "flex-start",
+                  alignItems: "center",
+                  paddingHorizontal: 12,
+                  marginTop: 5,
+                  paddingVertical: 6,
+                  width: "100%"
+                }}
+                icon="close"
+                title="Tap to stop reordering"
+                onPress={() => {
+                  useSideBarDraggingStore.setState({
+                    dragging: false
+                  });
+                }}
+              />
+            </View>
+          ) : (
+            <View
+              style={{
+                width: "100%",
+                paddingHorizontal: 0
+              }}
+            >
+              <UserStatus />
+            </View>
+          )}
         </View>
       </View>
     ) : null;

apps/mobile/app/components/side-menu/pinned-section.tsx

@@ -31,7 +31,6 @@ import useNavigationStore from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { SIZE, normalize } from "../../utils/size";
 import ReorderableList from "../list/reorderable-list";
-import { Properties } from "../properties";
 import { Button } from "../ui/button";
 import { Notice } from "../ui/notice";
 import { PressableButton } from "../ui/pressable";
@@ -161,10 +160,6 @@ export const PinItem = React.memo(
         )}
         <PressableButton
           type={isFocused ? "selected" : "gray"}
-          onLongPress={() => {
-            if (isPlaceholder) return;
-            Properties.present(item);
-          }}
           onPress={() => onPress(item)}
           customStyle={{
             width: "100%",

apps/mobile/app/hooks/use-actions.tsx

@@ -372,6 +372,7 @@ export const useActions = ({
         useSideBarDraggingStore.setState({
           dragging: true
         });
+        close();
       }
     });
   }

apps/mobile/app/navigation/tabs-holder.js

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { ScopedThemeProvider, useThemeColors } from "@notesnook/theme";
 import {
   activateKeepAwake,
   deactivateKeepAwake
@@ -40,6 +41,7 @@ import Animated, {
 import { notesnook } from "../../e2e/test.ids";
 import { db } from "../common/database";
 import { SideMenu } from "../components/side-menu";
+import { useSideBarDraggingStore } from "../components/side-menu/dragging-store";
 import { FluidTabs } from "../components/tabs";
 import useGlobalSafeAreaInsets from "../hooks/use-global-safe-area-insets";
 import { useShortcutManager } from "../hooks/use-shortcut-manager";
@@ -59,7 +61,6 @@ import {
 } from "../services/event-manager";
 import { useEditorStore } from "../stores/use-editor-store";
 import { useSettingStore } from "../stores/use-setting-store";
-import { ScopedThemeProvider, useThemeColors } from "@notesnook/theme";
 import {
   eClearEditor,
   eCloseFullscreenEditor,
@@ -69,7 +70,6 @@ import {
 import { editorRef, tabBarRef } from "../utils/global-refs";
 import { sleep } from "../utils/time";
 import { NavigationStack } from "./navigation-stack";
-import { useSideBarDraggingStore } from "../components/side-menu/dragging-store";
 
 const _TabsHolder = () => {
   const { colors, isDark } = useThemeColors();