mobile: fix multi-selection ux

apps/mobile/app/components/list-items/note/wrapper.tsx

@@ -28,13 +28,12 @@ import {
   hideSheet,
   presentSheet
 } from "../../../services/event-manager";
-import { useSelectionStore } from "../../../stores/use-selection-store";
 import { eOnLoadNote, eShowMergeDialog } from "../../../utils/events";
 import { tabBarRef } from "../../../utils/global-refs";
 
 import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 import NotePreview from "../../note-history/preview";
-import SelectionWrapper from "../selection-wrapper";
+import SelectionWrapper, { selectItem } from "../selection-wrapper";
 
 export const openNote = async (
   item: Note,
@@ -47,21 +46,8 @@ export const openNote = async (
   if (!isTrash) {
     note = (await db.notes.note(item.id)) as Note;
   }
-  if (useSelectionStore.getState().selectionMode === item.type) {
-    const {
-      selectedItemsList,
-      selectionMode,
-      clearSelection,
-      setSelectedItem
-    } = useSelectionStore.getState();
 
-    if (selectedItemsList.length > 0 && selectionMode === item.type) {
-      setSelectedItem(note.id);
-    } else {
-      clearSelection();
-    }
-    return;
-  }
+  if (selectItem(item)) return;
 
   if (note.conflicted) {
     eSendEvent(eShowMergeDialog, note);

apps/mobile/app/components/list-items/notebook/wrapper.tsx

@@ -27,18 +27,12 @@ import Navigation from "../../../services/navigation";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { useTrashStore } from "../../../stores/use-trash-store";
 import { presentDialog } from "../../dialog/functions";
-import SelectionWrapper from "../selection-wrapper";
+import SelectionWrapper, { selectItem } from "../selection-wrapper";
 
 export const openNotebook = (item: Notebook | BaseTrashItem<Notebook>) => {
   const isTrash = item.type === "trash";
-  const { selectedItemsList, setSelectedItem, selectionMode, clearSelection } =
-    useSelectionStore.getState();
-  if (selectedItemsList.length > 0 && selectionMode === item.type) {
-    setSelectedItem(item.id);
-    return;
-  } else {
-    clearSelection();
-  }
+
+  if (selectItem(item)) return;
 
   if (isTrash) {
     presentDialog({

apps/mobile/app/components/list-items/reminder/index.tsx

@@ -22,7 +22,6 @@ import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
-import { useSelectionStore } from "../../../stores/use-selection-store";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import ReminderSheet from "../../sheets/reminder";
@@ -30,7 +29,7 @@ import { IconButton } from "../../ui/icon-button";
 import { ReminderTime } from "../../ui/reminder-time";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import SelectionWrapper from "../selection-wrapper";
+import SelectionWrapper, { selectItem } from "../selection-wrapper";
 
 const ReminderItem = React.memo(
   ({
@@ -44,18 +43,7 @@ const ReminderItem = React.memo(
   }) => {
     const { colors } = useThemeColors();
     const openReminder = () => {
-      const {
-        selectedItemsList,
-        setSelectedItem,
-        selectionMode,
-        clearSelection
-      } = useSelectionStore.getState();
-      if (selectedItemsList.length > 0 && selectionMode === item.type) {
-        setSelectedItem(item.id);
-        return;
-      } else {
-        clearSelection();
-      }
+      if (selectItem(item)) return;
 
       ReminderSheet.present(item, undefined, isSheet);
     };

apps/mobile/app/components/list-items/selection-wrapper/index.tsx

@@ -26,6 +26,23 @@ import { Filler } from "./back-fill";
 import { SelectionIcon } from "./selection";
 import { Item, TrashItem } from "@notesnook/core";
 
+export function selectItem(item: Item) {
+  if (useSelectionStore.getState().selectionMode === item.type) {
+    const { selectionMode, clearSelection, setSelectedItem } =
+      useSelectionStore.getState();
+
+    if (selectionMode === item.type) {
+      setSelectedItem(item.id);
+    }
+
+    if (useSelectionStore.getState().selectedItemsList.length === 0) {
+      clearSelection();
+    }
+    return true;
+  }
+  return false;
+}
+
 type SelectionWrapperProps = PropsWithChildren<{
   item: Item;
   onPress: () => void;

apps/mobile/app/components/list-items/tag/index.tsx

@@ -23,13 +23,12 @@ import React from "react";
 import { View } from "react-native";
 import { notesnook } from "../../../../e2e/test.ids";
 import { TaggedNotes } from "../../../screens/notes/tagged";
-import { useSelectionStore } from "../../../stores/use-selection-store";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import SelectionWrapper from "../selection-wrapper";
+import SelectionWrapper, { selectItem } from "../selection-wrapper";
 
 const TagItem = React.memo(
   ({
@@ -43,18 +42,7 @@ const TagItem = React.memo(
   }) => {
     const { colors } = useThemeColors();
     const onPress = () => {
-      const {
-        selectedItemsList,
-        setSelectedItem,
-        selectionMode,
-        clearSelection
-      } = useSelectionStore.getState();
-      if (selectedItemsList.length > 0 && selectionMode === item.type) {
-        setSelectedItem(item.id);
-        return;
-      } else {
-        clearSelection();
-      }
+      if (selectItem(item)) return;
 
       TaggedNotes.navigate(item, true);
     };

apps/mobile/app/components/selection-header/index.tsx

@@ -214,7 +214,7 @@ export const SelectionHeader = React.memo(
             size={SIZE.xl}
           />
 
-          {renderedInRoute === "Notebooks" ? (
+          {renderedInRoute === "Notebooks" && selectedItemsList.length ? (
             <IconButton
               style={{
                 marginLeft: 10
@@ -231,7 +231,7 @@ export const SelectionHeader = React.memo(
             />
           ) : null}
 
-          {type !== "note" ? null : (
+          {type !== "note" || !selectedItemsList.length ? null : (
             <>
               <IconButton
                 onPress={async () => {
@@ -278,16 +278,14 @@ export const SelectionHeader = React.memo(
             </>
           )}
 
-          {renderedInRoute === "Notebook" ? (
+          {renderedInRoute === "Notebook" && selectedItemsList.length ? (
             <IconButton
               onPress={async () => {
-                if (selectedItemsList.length > 0) {
-                  if (!id) return;
-                  await db.notes.removeFromNotebook(id, ...selectedItemsList);
-                  updateNotebook(id);
-                  Navigation.queueRoutesForUpdate();
-                  clearSelection();
-                }
+                if (!id) return;
+                await db.notes.removeFromNotebook(id, ...selectedItemsList);
+                updateNotebook(id);
+                Navigation.queueRoutesForUpdate();
+                clearSelection();
               }}
               style={{
                 marginLeft: 10
@@ -301,7 +299,7 @@ export const SelectionHeader = React.memo(
             />
           ) : null}
 
-          {focusedRouteId === "Favorites" ? (
+          {focusedRouteId === "Favorites" && selectedItemsList.length ? (
             <IconButton
               onPress={addToFavorite}
               style={{
@@ -315,7 +313,7 @@ export const SelectionHeader = React.memo(
             />
           ) : null}
 
-          {type === "trash" ? null : (
+          {type === "trash" || !selectedItemsList.length ? null : (
             <IconButton
               style={{
                 marginLeft: 10
@@ -337,7 +335,7 @@ export const SelectionHeader = React.memo(
             />
           )}
 
-          {type === "trash" ? (
+          {type === "trash" && selectedItemsList.length ? (
             <>
               <IconButton
                 style={{