mobile: fix notebook-sheet position

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

@@ -33,6 +33,7 @@ import { eScrollEvent } from "../../utils/events";
 import { LeftMenus } from "./left-menus";
 import { RightMenus } from "./right-menus";
 import { Title } from "./title";
+import { useNavigation } from "@react-navigation/native";
 
 type HeaderRightButton = {
   title: string;
@@ -66,6 +67,8 @@ export const Header = ({
   hasSearch?: boolean;
   onSearch?: () => void;
 }) => {
+  const navigation = useNavigation();
+
   const { colors } = useThemeColors();
   const insets = useGlobalSafeAreaInsets();
   const [borderHidden, setBorderHidden] = useState(true);

apps/mobile/app/components/sheets/notebook-sheet/index.tsx

@@ -19,13 +19,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Notebook, VirtualizedGrouping } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
-import { RefreshControl, View, useWindowDimensions } from "react-native";
+import {
+  Platform,
+  RefreshControl,
+  View,
+  useWindowDimensions
+} from "react-native";
 import ActionSheet, { ActionSheetRef } from "react-native-actions-sheet";
 import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 import Config from "react-native-config";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import create from "zustand";
 import { notesnook } from "../../../../e2e/test.ids";
+import { db } from "../../../common/database";
 import { MMKV } from "../../../common/database/mmkv";
 import { useNotebook } from "../../../hooks/use-notebook";
 import NotebookScreen from "../../../screens/notebook";
@@ -43,9 +49,8 @@ import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
 import { AddNotebookSheet } from "../add-notebook";
-import Sort from "../sort";
 import { MoveNotebookSheet } from "../move-notebook";
-import { db } from "../../../common/database";
+import Sort from "../sort";
 
 const useItemSelectionStore = createItemSelectionStore(true, false);
 
@@ -63,7 +68,8 @@ class NotebookSheetConfig {
   }
 
   static get(item: ConfigItem) {
-    return MMKV.getInt(NotebookSheetConfig.makeId(item)) || 0;
+    const value = MMKV.getInt(NotebookSheetConfig.makeId(item));
+    return typeof value === "number" ? value : 0;
   }
 
   static set(item: ConfigItem, index = 0) {
@@ -126,11 +132,6 @@ export const NotebookSheet = () => {
         if (!focusedRouteId) return;
         const nextRoot = await findRootNotebookId(focusedRouteId);
         if (nextRoot !== currentItem.current) {
-          console.log(
-            "NotebookSheet.useEffect.canShow",
-            "Root changed to",
-            nextRoot
-          );
           useItemSelectionStore.setState({
             enabled: false,
             selection: {}
@@ -145,11 +146,8 @@ export const NotebookSheet = () => {
         if (ref.current?.isOpen()) {
           ref.current?.snapToIndex(snapPoint);
         } else {
-          setTimeout(() => {
-            ref.current?.show(snapPoint);
-          }, 150);
+          ref.current?.show(snapPoint);
         }
-        console.log("NotebookSheet.useEffect.didShow", focusedRouteId);
         setRoot(nextRoot);
         onRequestUpdate();
       });
@@ -162,7 +160,7 @@ export const NotebookSheet = () => {
         ref.current?.hide();
       }
     }
-  }, [canShow, onRequestUpdate, focusedRouteId]);
+  }, [canShow, focusedRouteId]);
 
   return (
     <ActionSheet
@@ -198,7 +196,11 @@ export const NotebookSheet = () => {
         backgroundColor: colors.secondary.background
       }}
       keyboardHandlerEnabled={false}
-      snapPoints={Config.isTesting === "true" ? [100] : [20, 100]}
+      snapPoints={
+        Config.isTesting === "true"
+          ? [100]
+          : [Platform.OS === "android" ? 15 : 10, 100]
+      }
       initialSnapIndex={1}
       backgroundInteractionEnabled
       gestureEnabled
@@ -237,7 +239,7 @@ export const NotebookSheet = () => {
           >
             <Icon
               name="notebook-plus"
-              color={colors.primary.accent}
+              color={colors.primary.icon}
               size={SIZE.xxl}
             />
           </View>

apps/mobile/app/hooks/use-db-item.ts

@@ -71,12 +71,10 @@ export const useDBItem = <T extends keyof ItemTypeKey>(
       if (typeof itemId === "string" && itemId !== itemIdRef.current) return;
       if (!isValidIdOrIndex(idOrIndex)) return;
 
-      console.log("useDBItem.onUpdateItem", idOrIndex, type);
-
       if (items && typeof idOrIndex === "number") {
         items.item(idOrIndex).then((item) => {
           setItem(item.item);
-          itemIdRef.current = item.item.id;
+          itemIdRef.current = item.item?.id;
         });
       } else {
         if (!(db as any)[type + "s"][type]) {

apps/mobile/app/hooks/use-notebook.ts

@@ -36,7 +36,6 @@ export const useNotebook = (
 
   const onRequestUpdate = React.useCallback(() => {
     if (!item?.id) return;
-    console.log("useNotebook.onRequestUpdate", item?.id, Date.now());
 
     const selector = db.relations.from(
       {
@@ -59,7 +58,6 @@ export const useNotebook = (
 
   useEffect(() => {
     if (nestedNotebooks) {
-      console.log("useNotebook.useEffect.onRequestUpdate");
       onRequestUpdate();
     }
   }, [item?.id, onRequestUpdate, nestedNotebooks]);

apps/mobile/app/screens/home/index.tsx

@@ -32,6 +32,7 @@ import { openEditor } from "../notes/common";
 
 export const Home = ({ navigation, route }: NavigationProps<"Notes">) => {
   const [notes, loading] = useNotes();
+
   const isFocused = useNavigationFocus(navigation, {
     onFocus: (prev) => {
       Navigation.routeNeedsUpdate(

apps/mobile/app/screens/notebook/index.tsx

@@ -16,40 +16,37 @@ GNU General Public License for more details.
 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 { resolveItems } from "@notesnook/common";
 import { VirtualizedGrouping } from "@notesnook/core";
 import { Note, Notebook } from "@notesnook/core/dist/types";
 import React, { useEffect, useRef, useState } from "react";
+import { View } from "react-native";
 import { db } from "../../common/database";
 import DelayLayout from "../../components/delay-layout";
 import { Header } from "../../components/header";
 import List from "../../components/list";
 import { NotebookHeader } from "../../components/list-items/headers/notebook-header";
+import SelectionHeader from "../../components/selection-header";
 import { AddNotebookSheet } from "../../components/sheets/add-notebook";
+import { IconButton } from "../../components/ui/icon-button";
+import { Pressable } from "../../components/ui/pressable";
+import Paragraph from "../../components/ui/typography/paragraph";
 import { useNavigationFocus } from "../../hooks/use-navigation-focus";
-import {
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../services/event-manager";
+import { eSendEvent, eSubscribeEvent } from "../../services/event-manager";
 import Navigation, { NavigationProps } from "../../services/navigation";
 import useNavigationStore, {
   NotebookScreenParams
 } from "../../stores/use-navigation-store";
 import { eUpdateNotebookRoute } from "../../utils/events";
 import { findRootNotebookId } from "../../utils/notebooks";
-import { openEditor, setOnFirstSave } from "../notes/common";
-import SelectionHeader from "../../components/selection-header";
-import Paragraph from "../../components/ui/typography/paragraph";
-import { View } from "react-native";
 import { SIZE } from "../../utils/size";
-import { IconButton } from "../../components/ui/icon-button";
-import { Pressable } from "../../components/ui/pressable";
-import { resolveItems } from "@notesnook/common";
+import { openEditor, setOnFirstSave } from "../notes/common";
 
 const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
   const [notes, setNotes] = useState<VirtualizedGrouping<Note>>();
   const params = useRef<NotebookScreenParams>(route?.params);
   const [loading, setLoading] = useState(true);
+  const updateOnFocus = useRef(false);
   const [breadcrumbs, setBreadcrumbs] = useState<
     {
       id: string;
@@ -59,11 +56,17 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
 
   useNavigationFocus(navigation, {
     onFocus: () => {
-      Navigation.routeNeedsUpdate(route.name, onRequestUpdate);
+      if (updateOnFocus.current) {
+        onRequestUpdate();
+        updateOnFocus.current = false;
+      } else {
+        Navigation.routeNeedsUpdate(route.name, onRequestUpdate);
+      }
       syncWithNavigation();
       return false;
     },
     onBlur: () => {
+      updateOnFocus.current = false;
       setOnFirstSave(null);
       return false;
     }
@@ -79,6 +82,15 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
 
   const onRequestUpdate = React.useCallback(
     async (data?: NotebookScreenParams) => {
+      if (
+        useNavigationStore.getState().focusedRouteId !==
+          params.current.item.id &&
+        !data
+      ) {
+        updateOnFocus.current = true;
+        return;
+      }
+
       if (data?.item?.id && params.current.item?.id !== data?.item?.id) {
         const nextRootNotebookId = await findRootNotebookId(data?.item?.id);
         const currentNotebookRoot = await findRootNotebookId(
@@ -122,10 +134,10 @@ const NotebookScreen = ({ route, navigation }: NavigationProps<"Notebook">) => {
   );
 
   useEffect(() => {
-    onRequestUpdate();
-    eSubscribeEvent(eUpdateNotebookRoute, onRequestUpdate);
+    onRequestUpdate(params.current);
+    const sub = eSubscribeEvent(eUpdateNotebookRoute, onRequestUpdate);
     return () => {
-      eUnSubscribeEvent(eUpdateNotebookRoute, onRequestUpdate);
+      sub?.unsubscribe();
     };
   }, [onRequestUpdate]);
 

apps/mobile/app/screens/notes/index.tsx

@@ -81,16 +81,21 @@ const NotesPage = ({
     route.name === "ColoredNotes"
       ? (params.current?.item as Color)?.colorCode
       : undefined;
-
+  const updateOnFocus = useRef(false);
   const isFocused = useNavigationFocus(navigation, {
     onFocus: (prev) => {
-      Navigation.routeNeedsUpdate(route.name, onRequestUpdate);
+      if (updateOnFocus.current) {
+        onRequestUpdate();
+        updateOnFocus.current = false;
+      } else {
+        Navigation.routeNeedsUpdate(route.name, onRequestUpdate);
+      }
       syncWithNavigation();
-
       if (focusControl) return !prev.current;
       return false;
     },
     onBlur: () => {
+      updateOnFocus.current = false;
       setOnFirstSave(null);
       return false;
     },
@@ -99,7 +104,6 @@ const NotesPage = ({
 
   const syncWithNavigation = React.useCallback(() => {
     const { item } = params.current;
-
     useNavigationStore
       .getState()
       .setFocusedRouteId(params?.current?.item?.id || route.name);
@@ -113,6 +117,14 @@ const NotesPage = ({
 
   const onRequestUpdate = React.useCallback(
     async (data?: NotesScreenParams) => {
+      if (
+        useNavigationStore.getState().focusedRouteId !==
+          params.current.item.id &&
+        !data
+      ) {
+        updateOnFocus.current = false;
+        return;
+      }
       const isNew = data && data?.item?.id !== params.current?.item?.id;
       if (data) params.current = data;