mobile: fix bugs

apps/mobile/app/components/header/right-menus.tsx

@@ -23,8 +23,6 @@ import { Platform, StyleSheet, View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import Menu from "react-native-reanimated-material-menu";
 import { notesnook } from "../../../e2e/test.ids";
-import Navigation from "../../services/navigation";
-import SearchService from "../../services/search";
 import {
   HeaderRightButton,
   RouteName

apps/mobile/app/components/note-history/index.tsx

@@ -17,7 +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 React, { useCallback, useEffect, useState } from "react";
+import React, { RefObject, useCallback, useEffect, useState } from "react";
 import { ActivityIndicator, Text, View } from "react-native";
 
 import { getFormattedDate, getTimeAgo } from "@notesnook/common";
@@ -109,7 +109,7 @@ export default function NoteHistory({
   note
 }: {
   note: Note;
-  fwdRef: ActionSheetRef;
+  fwdRef: RefObject<ActionSheetRef>;
 }) {
   const [history, setHistory] = useState<VirtualizedGrouping<HistorySession>>();
   const [_loading, setLoading] = useState(true);

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

@@ -152,11 +152,13 @@ export const NotebookSheet = () => {
         onRequestUpdate();
       });
     } else {
-      useItemSelectionStore.setState({
-        enabled: false,
-        selection: {}
-      });
-      ref.current?.hide();
+      if (ref.current?.isOpen()) {
+        useItemSelectionStore.setState({
+          enabled: false,
+          selection: {}
+        });
+        ref.current?.hide();
+      }
     }
   }, [canShow, onRequestUpdate, focusedRouteId]);
 

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

@@ -32,10 +32,7 @@ import { useUserStore } from "../../stores/use-user-store";
 import { SUBSCRIPTION_STATUS } from "../../utils/constants";
 import { eOpenPremiumDialog } from "../../utils/events";
 import { MenuItemsList } from "../../utils/menu-items";
-import { SIZE } from "../../utils/size";
 import ReorderableList from "../list/reorderable-list";
-import { IconButton } from "../ui/icon-button";
-import Paragraph from "../ui/typography/paragraph";
 import { ColorSection } from "./color-section";
 import { useSideBarDraggingStore } from "./dragging-store";
 import { MenuItem } from "./menu-item";
@@ -135,40 +132,6 @@ export const SideMenu = React.memo(
             paddingTop: insets.top
           }}
         >
-          {dragging ? (
-            <View
-              style={{
-                flexDirection: "row",
-                borderRadius: 5,
-                marginBottom: 12,
-                justifyContent: "space-between",
-                alignItems: "center",
-                paddingHorizontal: 12,
-                backgroundColor: colors.secondary.background,
-                marginHorizontal: 12,
-                marginTop: 5,
-                paddingVertical: 6
-              }}
-            >
-              <Paragraph size={SIZE.sm}>REORDERING</Paragraph>
-
-              <IconButton
-                name="close"
-                size={20}
-                onPress={() => {
-                  useSideBarDraggingStore.setState({
-                    dragging: false
-                  });
-                }}
-                color={colors.primary.icon}
-                customStyle={{
-                  width: 35,
-                  height: 35
-                }}
-              />
-            </View>
-          ) : null}
-
           <FlatList
             alwaysBounceVertical={false}
             contentContainerStyle={{

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

@@ -40,6 +40,7 @@ import { editorState } from "../../screens/editor/tiptap/utils";
 import { eSendEvent } from "../../services/event-manager";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eClearEditor } from "../../utils/events";
+import { useSideBarDraggingStore } from "../side-menu/dragging-store";
 
 interface TabProps extends ViewProps {
   dimensions: { width: number; height: number };
@@ -219,6 +220,9 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
           translateX.value = 299;
           translateX.value = 300;
         }
+        useSideBarDraggingStore.setState({
+          dragging: false
+        });
         onDrawerStateChange(false);
         isDrawerOpen.value = false;
       },
@@ -340,6 +344,7 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(function FluidTabs(
           isDrawerOpen.value = false;
           currentTab.value = 1;
           runOnJS(onDrawerStateChange)(false);
+
           return;
         } else if (!isSwipeLeft && finalValue < 100) {
           translateX.value = withSpring(0, animationConfig);

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

@@ -200,6 +200,7 @@ export const useActions = ({
           title: value
         });
 
+        eSendEvent(Navigation.routeNames.TaggedNotes);
         InteractionManager.runAfterInteractions(() => {
           useTagStore.getState().refresh();
           useMenuStore.getState().setMenuPins();
@@ -230,6 +231,8 @@ export const useActions = ({
           id: item.id,
           title: value
         });
+
+        eSendEvent(Navigation.routeNames.ColoredNotes);
         useMenuStore.getState().setColorNotes();
       },
       positiveText: "Rename"
@@ -499,7 +502,7 @@ export const useActions = ({
   if (item.type === "note") {
     async function openHistory() {
       presentSheet({
-        component: (ref) => <NoteHistory fwdRef={ref} note={item} />
+        component: (ref) => <NoteHistory fwdRef={ref} note={item as Note} />
       });
     }
 
@@ -520,7 +523,7 @@ export const useActions = ({
     }
 
     const toggleReadyOnlyMode = async () => {
-      const currentReadOnly = (item as Note).localOnly;
+      const currentReadOnly = (item as Note).readonly;
       await db.notes.readonly(!currentReadOnly, item?.id);
 
       if (useEditorStore.getState().currentEditingNote === item.id) {

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

@@ -69,6 +69,7 @@ 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();
@@ -434,7 +435,13 @@ const _TabsHolder = () => {
               enabled={deviceMode !== "tablet" && !fullscreen}
               onScroll={onScroll}
               onChangeTab={onChangeTab}
-              onDrawerStateChange={() => true}
+              onDrawerStateChange={(state) => {
+                if (!state) {
+                  useSideBarDraggingStore.setState({
+                    dragging: false
+                  });
+                }
+              }}
             >
               <View
                 key="1"
@@ -459,6 +466,12 @@ const _TabsHolder = () => {
                   {deviceMode === "mobile" ? (
                     <Animated.View
                       onTouchEnd={() => {
+                        if (useSideBarDraggingStore.getState().dragging) {
+                          useSideBarDraggingStore.setState({
+                            dragging: false
+                          });
+                          return;
+                        }
                         tabBarRef.current?.closeDrawer();
                         animatedOpacity.value = withTiming(0);
                         animatedTranslateY.value = withTiming(-9999);

apps/mobile/app/screens/editor/tiptap/commands.ts

@@ -98,13 +98,18 @@ class Commands {
   clearContent = async () => {
     this.previousSettings = null;
     await this.doAsync(
-      `editor.commands.blur();
+      `
+      if (typeof globalThis.statusBar !== "undefined") {
+        globalThis.statusBar.current.resetWords();
+        globalThis.statusBar.current.set({date:"",saved:""});
+      }
+      
+      editor.commands.blur();
 typeof globalThis.editorTitle !== "undefined" && editorTitle.current && editorTitle.current?.blur();
 if (editorController.content) editorController.content.current = null;
 editorController.onUpdate();
 editorController.setTitle(null);
-editorController.countWords(0);
-typeof globalThis.statusBar !== "undefined" && statusBar.current.set({date:"",saved:""});
+
         `
     );
   };

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

@@ -39,6 +39,7 @@ import useNavigationStore, {
 } from "../../stores/use-navigation-store";
 import { setOnFirstSave } from "./common";
 import { db } from "../../common/database";
+import SelectionHeader from "../../components/selection-header";
 export const WARNING_DATA = {
   title: "Some notes in this topic are not synced"
 };
@@ -119,6 +120,7 @@ const NotesPage = ({
     async (data?: NotesScreenParams) => {
       const isNew = data && data?.item?.id !== params.current?.item?.id;
       if (data) params.current = data;
+
       try {
         if (isNew) setLoadingNotes(true);
         const notes = (await get(
@@ -126,6 +128,20 @@ const NotesPage = ({
           true
         )) as VirtualizedGrouping<Note>;
 
+        if (route.name === "TaggedNotes" || route.name === "ColoredNotes") {
+          const item = await (db as any)[params.current.item.type + "s"][
+            params.current.item.type
+          ](params.current.item.id);
+
+          if (!item) {
+            Navigation.goBack();
+            return;
+          }
+
+          params.current.item = item;
+          params.current.title = item.title;
+        }
+
         if (notes.placeholders.length === 0) setLoadingNotes(false);
         setNotes(notes);
         await notes.item(0, resolveItems);
@@ -135,7 +151,7 @@ const NotesPage = ({
         console.error(e);
       }
     },
-    [get, syncWithNavigation]
+    [get, route.name, syncWithNavigation]
   );
 
   useEffect(() => {
@@ -163,6 +179,12 @@ const NotesPage = ({
 
   return (
     <>
+      <SelectionHeader
+        id={route.params?.item?.id}
+        items={notes}
+        type="note"
+        renderedInRoute={route.name}
+      />
       <Header
         renderedInRoute={route.name}
         title={title || route.name}

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

@@ -101,6 +101,7 @@ export const Search = ({ route, navigation }: NavigationProps<"Search">) => {
         id={route.name}
         items={results}
         type={route.params?.type}
+        renderedInRoute={route.name}
       />
       <SearchBar onChangeText={onSearch} loading={loading} />
       <List

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

@@ -45,9 +45,15 @@ export const Tags = ({ navigation, route }: NavigationProps<"Tags">) => {
 
   return (
     <>
-      <SelectionHeader id={route.name} items={tags} type="tag" />
+      <SelectionHeader
+        id={route.name}
+        items={tags}
+        type="tag"
+        renderedInRoute={route.name}
+      />
       <Header
         renderedInRoute={route.name}
+        id={route.name}
         title={route.name}
         canGoBack={false}
         hasSearch={true}

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

@@ -82,10 +82,16 @@ export const Trash = ({ navigation, route }: NavigationProps<"Trash">) => {
 
   return (
     <>
-      <SelectionHeader id={route.name} items={trash} type="trash" />
+      <SelectionHeader
+        id={route.name}
+        items={trash}
+        type="trash"
+        renderedInRoute={route.name}
+      />
       <Header
         renderedInRoute={route.name}
         title={route.name}
+        id={route.name}
         canGoBack={false}
         hasSearch={true}
         onSearch={() => {

packages/editor-mobile/src/components/statusbar.tsx

@@ -37,6 +37,10 @@ function StatusBar({ container }: { container: RefObject<HTMLDivElement> }) {
       const words = getTotalWords(editor as Editor) + " words";
       if (currentWords.current === words) return;
       setWords(words);
+    },
+    resetWords: () => {
+      currentWords.current = `0 words`;
+      setWords(`0 words`);
     }
   });
   globalThis.statusBar = statusBar;