refactor

apps/mobile/App.js

@@ -1,38 +1,42 @@
 import React, { useEffect } from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import Launcher from './src/components/launcher';
 import { ApplicationHolder } from './src/navigation';
 import Notifications from './src/services/notifications';
 import SettingsService from './src/services/settings';
 import { TipManager } from './src/services/tip-manager';
-import { useUserStore } from './src/stores/stores';
+import { useUserStore } from './src/stores/use-user-store';
 import { useAppEvents } from './src/utils/hooks/use-app-events';
 
+SettingsService.init();
 SettingsService.checkOrientation();
 const App = () => {
   useAppEvents();
-
   useEffect(() => {
-    (async () => {
-      try {
-        SettingsService.init();
-
-        let appLockMode = SettingsService.get().appLockMode;
-        if (appLockMode && appLockMode !== 'none') {
-          useUserStore.getState().setVerifyUser(true);
-        }
-        TipManager.init();
-        Notifications.get();
-        await SettingsService.onFirstLaunch();
-      } catch (e) {}
-    })();
+    let { appLockMode } = SettingsService.get();
+    if (appLockMode && appLockMode !== 'none') {
+      useUserStore.getState().setVerifyUser(true);
+    }
+    setTimeout(() => {
+      console.log('run later');
+      SettingsService.onFirstLaunch();
+      Notifications.get();
+      TipManager.init();
+    }, 100);
   }, []);
 
   return (
-    <SafeAreaProvider>
-      <ApplicationHolder />
-      <Launcher />
-    </SafeAreaProvider>
+    <GestureHandlerRootView
+      style={{
+        flex: 1
+      }}
+    >
+      <SafeAreaProvider>
+        <ApplicationHolder />
+        <Launcher />
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
   );
 };
 

apps/mobile/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 import React from 'react';
 import { AppRegistry, LogBox, Platform, UIManager } from 'react-native';
 import Config from 'react-native-config';
@@ -7,6 +8,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { enableScreens } from 'react-native-screens';
 import { name as appName } from './app.json';
 import Notifications from './src/services/notifications';
+
 global.Buffer = require('buffer').Buffer;
 enableLayoutAnimations(true);
 

apps/mobile/src/components/announcements/announcement.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { FlatList, View } from 'react-native';
-import { useMessageStore, useSelectionStore } from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
+import { useSelectionStore } from '../../stores/use-selection-store';
+import { useMessageStore } from '../../stores/use-message-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { allowedOnPlatform, renderItem } from './functions';
 
 export const Announcement = ({ color }) => {

apps/mobile/src/components/announcements/body.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import Paragraph from '../ui/typography/paragraph';
 import { getStyle } from './functions';
 

apps/mobile/src/components/announcements/cta.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Linking, View } from 'react-native';
 import SettingsBackupAndRestore from '../../screens/settings/backup-restore';
 import { eSendEvent, presentSheet } from '../../services/event-manager';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eCloseAnnouncementDialog } from '../../utils/events';
 import { SIZE } from '../../utils/size';
 import { sleep } from '../../utils/time';

apps/mobile/src/components/announcements/description.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import Paragraph from '../ui/typography/paragraph';
 import { getStyle } from './functions';

apps/mobile/src/components/announcements/functions.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import { View } from 'react-native';
-import { allowedPlatforms } from '../../stores/stores';
+import { allowedPlatforms } from '../../stores';
 import { ProFeatures } from '../dialogs/result/pro-features';
 import { Body } from './body';
 import { Cta } from './cta';

apps/mobile/src/components/announcements/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { FlatList, View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
-import { useMessageStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useMessageStore } from '../../stores/use-message-store';
 import { DDS } from '../../services/device-detection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
 import { eCloseAnnouncementDialog, eOpenAnnouncementDialog } from '../../utils/events';

apps/mobile/src/components/announcements/list.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import Paragraph from '../ui/typography/paragraph';
 import { getStyle } from './functions';
 

apps/mobile/src/components/announcements/subheading.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import Heading from '../ui/typography/heading';
 import { getStyle } from './functions';

apps/mobile/src/components/announcements/title.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useMessageStore } from '../../stores/stores';
+import { useMessageStore } from '../../stores/use-message-store';
 import { SIZE } from '../../utils/size';
 import { Button } from '../ui/button';
 import Heading from '../ui/typography/heading';

apps/mobile/src/components/attachments/actions.js

@@ -5,8 +5,8 @@ import { ScrollView } from 'react-native-gesture-handler';
 import picker from '../../screens/editor/tiny/toolbar/picker';
 import { eSendEvent, presentSheet, ToastEvent } from '../../services/event-manager';
 import PremiumService from '../../services/premium';
-import { useAttachmentStore } from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
+import { useAttachmentStore } from '../../stores/use-attachment-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { formatBytes } from '../../utils';
 import { db } from '../../utils/database';
 import { eCloseAttachmentDialog, eCloseProgressDialog } from '../../utils/events';

apps/mobile/src/components/attachments/attachmentitem.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import * as Progress from 'react-native-progress';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useAttachmentStore } from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
+import { useAttachmentStore } from '../../stores/use-attachment-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { formatBytes } from '../../utils';
 import { db } from '../../utils/database';
 import { useAttachmentProgress } from '../../utils/hooks/use-attachment-progress';

apps/mobile/src/components/attachments/index.js

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { db } from '../../utils/database';
 import { eCloseAttachmentDialog, eOpenAttachmentsDialog } from '../../utils/events';
 import filesystem from '../../utils/filesystem';

apps/mobile/src/components/auth/changepassword.js

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
-import { useUserStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useUserStore } from '../../stores/use-user-store';
 import { eSendEvent, presentSheet, ToastEvent } from '../../services/event-manager';
 import { db } from '../../utils/database';
 import { eCloseProgressDialog } from '../../utils/events';

apps/mobile/src/components/auth/forgotpassword.js

@@ -4,7 +4,7 @@ import ActionSheet from 'react-native-actions-sheet';
 import { DDS } from '../../services/device-detection';
 import { ToastEvent } from '../../services/event-manager';
 import SettingsService from '../../services/settings';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { db } from '../../utils/database';
 import DialogHeader from '../dialog/dialog-header';
 import { Button } from '../ui/button';

apps/mobile/src/components/auth/index.js

@@ -1,10 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useThemeStore } from '../../stores/theme';
-import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
+import { Platform } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eCloseLoginDialog, eOpenLoginDialog } from '../../utils/events';
 import { sleep } from '../../utils/time';
 import BaseDialog from '../dialog/base-dialog';
 import { Toast } from '../toast';
+import { IconButton } from '../ui/icon-button';
 import { Login } from './login';
 import { Signup } from './signup';
 
@@ -20,6 +23,7 @@ const Auth = () => {
   const [visible, setVisible] = useState(false);
   const [currentAuthMode, setCurrentAuthMode] = useState(AuthMode.login);
   const actionSheetRef = useRef();
+  const insets = useSafeAreaInsets();
 
   useEffect(() => {
     eSubscribeEvent(eOpenLoginDialog, open);
@@ -55,8 +59,6 @@ const Auth = () => {
       background={colors.bg}
       transparent={false}
     >
-      <Toast context="local" />
-
       {currentAuthMode !== AuthMode.login ? (
         <Signup
           changeMode={mode => setCurrentAuthMode(mode)}
@@ -66,6 +68,24 @@ const Auth = () => {
       ) : (
         <Login changeMode={mode => setCurrentAuthMode(mode)} />
       )}
+
+      {currentAuthMode === AuthMode.welcomeSignup ? null : (
+        <IconButton
+          name="arrow-left"
+          onPress={() => {
+            eSendEvent(eCloseLoginDialog);
+          }}
+          color={colors.pri}
+          customStyle={{
+            position: 'absolute',
+            zIndex: 999,
+            left: 12,
+            top: Platform.OS === 'ios' ? 12 + insets.top : 12
+          }}
+        />
+      )}
+
+      <Toast context="local" />
     </BaseDialog>
   );
 };

apps/mobile/src/components/auth/login.js

@@ -3,18 +3,19 @@ import { Platform, View } from 'react-native';
 import { SheetManager } from 'react-native-actions-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { DDS } from '../../services/device-detection';
-import { eSendEvent, presentSheet, ToastEvent } from '../../services/event-manager';
+import { eSendEvent, ToastEvent } from '../../services/event-manager';
 import { clearMessage } from '../../services/message';
 import PremiumService from '../../services/premium';
 import SettingsService from '../../services/settings';
-import { useUserStore } from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
+import { useUserStore } from '../../stores/use-user-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { db } from '../../utils/database';
 import { eCloseLoginDialog } from '../../utils/events';
 import { SIZE } from '../../utils/size';
 import { sleep } from '../../utils/time';
 import BaseDialog from '../dialog/base-dialog';
 import SheetProvider from '../sheet-provider';
+import { Progress } from '../sheets/progress';
 import { Button } from '../ui/button';
 import { IconButton } from '../ui/icon-button';
 import Input from '../ui/input';
@@ -25,7 +26,6 @@ import Paragraph from '../ui/typography/paragraph';
 import { SVG } from './background';
 import { ForgotPassword } from './forgot-password';
 import TwoFactorVerification from './two-factor';
-import { Progress } from '../sheets/progress';
 export const Login = ({ changeMode }) => {
   const colors = useThemeStore(state => state.colors);
   const email = useRef();
@@ -130,20 +130,6 @@ export const Login = ({ changeMode }) => {
 
   return (
     <>
-      <IconButton
-        name="arrow-left"
-        onPress={() => {
-          eSendEvent(eCloseLoginDialog);
-        }}
-        color={colors.pri}
-        customStyle={{
-          position: 'absolute',
-          zIndex: 999,
-          left: 12,
-          top: Platform.OS === 'ios' ? 12 + insets.top : 12
-        }}
-      />
-
       <ForgotPassword />
 
       <SheetProvider context="two_factor_verify" />
@@ -167,123 +153,121 @@ export const Login = ({ changeMode }) => {
             <SvgView src={SVG(colors.night ? colors.icon : 'black')} height={700} />
           </BouncingView>
         </View>
-        <BouncingView initialScale={0.98} duration={3000}>
-          <View
+        <View
+          style={{
+            width: '100%',
+            justifyContent: 'center',
+            alignSelf: 'center',
+            paddingHorizontal: 12,
+            marginBottom: 30,
+            marginTop: 15
+          }}
+        >
+          <Heading
             style={{
-              width: '100%',
-              justifyContent: 'center',
-              alignSelf: 'center',
-              paddingHorizontal: 12,
-              marginBottom: 30,
-              marginTop: 15
+              textAlign: 'center'
             }}
+            size={30}
+            color={colors.heading}
           >
-            <Heading
-              style={{
-                textAlign: 'center'
-              }}
-              size={30}
-              color={colors.heading}
-            >
-              Welcome back!
-            </Heading>
-            <Paragraph
-              style={{
-                textDecorationLine: 'underline',
-                textAlign: 'center',
-                marginTop: 5
-              }}
-              onPress={() => {
-                changeMode(1);
-              }}
-              size={SIZE.md}
-            >
-              Don't have an account? Sign up
-            </Paragraph>
-          </View>
-          <View
+            Welcome back!
+          </Heading>
+          <Paragraph
             style={{
-              width: focused ? '100%' : '99.9%',
-              padding: 12,
-              backgroundColor: colors.bg,
-              flexGrow: 1
+              textDecorationLine: 'underline',
+              textAlign: 'center',
+              marginTop: 5
             }}
+            onPress={() => {
+              changeMode(1);
+            }}
+            size={SIZE.md}
           >
-            <Input
-              fwdRef={emailInputRef}
-              onChangeText={value => {
-                email.current = value;
-              }}
-              testID="input.email"
-              onErrorCheck={e => setError(e)}
-              returnKeyLabel="Next"
-              returnKeyType="next"
-              autoComplete="email"
-              validationType="email"
-              autoCorrect={false}
-              autoCapitalize="none"
-              errorMessage="Email is invalid"
-              placeholder="Email"
-              onSubmit={() => {
-                passwordInputRef.current?.focus();
-              }}
-            />
+            Don't have an account? Sign up
+          </Paragraph>
+        </View>
+        <View
+          style={{
+            width: focused ? '100%' : '99.9%',
+            padding: 12,
+            backgroundColor: colors.bg,
+            flexGrow: 1
+          }}
+        >
+          <Input
+            fwdRef={emailInputRef}
+            onChangeText={value => {
+              email.current = value;
+            }}
+            testID="input.email"
+            onErrorCheck={e => setError(e)}
+            returnKeyLabel="Next"
+            returnKeyType="next"
+            autoComplete="email"
+            validationType="email"
+            autoCorrect={false}
+            autoCapitalize="none"
+            errorMessage="Email is invalid"
+            placeholder="Email"
+            onSubmit={() => {
+              passwordInputRef.current?.focus();
+            }}
+          />
 
-            <Input
-              fwdRef={passwordInputRef}
-              onChangeText={value => {
-                password.current = value;
-              }}
-              testID="input.password"
-              returnKeyLabel="Done"
-              returnKeyType="done"
-              secureTextEntry
-              autoComplete="password"
-              autoCapitalize="none"
-              autoCorrect={false}
-              placeholder="Password"
-              marginBottom={0}
-              onSubmit={() => login()}
-            />
+          <Input
+            fwdRef={passwordInputRef}
+            onChangeText={value => {
+              password.current = value;
+            }}
+            testID="input.password"
+            returnKeyLabel="Done"
+            returnKeyType="done"
+            secureTextEntry
+            autoComplete="password"
+            autoCapitalize="none"
+            autoCorrect={false}
+            placeholder="Password"
+            marginBottom={0}
+            onSubmit={() => login()}
+          />
+          <Button
+            title="Forgot your password?"
+            style={{
+              alignSelf: 'flex-end',
+              height: 30,
+              paddingHorizontal: 0
+            }}
+            onPress={() => {
+              SheetManager.show('forgotpassword_sheet', email.current);
+            }}
+            textStyle={{
+              textDecorationLine: 'underline'
+            }}
+            fontSize={SIZE.xs}
+            type="gray"
+          />
+
+          <View
+            style={{
+              // position: 'absolute',
+              marginTop: 50,
+              alignSelf: 'center'
+            }}
+          >
             <Button
-              title="Forgot your password?"
               style={{
-                alignSelf: 'flex-end',
-                height: 30,
-                paddingHorizontal: 0
+                marginTop: 10,
+                width: 250,
+                borderRadius: 100
               }}
-              onPress={() => {
-                SheetManager.show('forgotpassword_sheet', email.current);
-              }}
-              textStyle={{
-                textDecorationLine: 'underline'
-              }}
-              fontSize={SIZE.xs}
-              type="gray"
+              loading={loading}
+              onPress={() => login()}
+              //  width="100%"
+              type="accent"
+              title={loading ? null : 'Login to your account'}
             />
-
-            <View
-              style={{
-                // position: 'absolute',
-                marginTop: 50,
-                alignSelf: 'center'
-              }}
-            >
-              <Button
-                style={{
-                  marginTop: 10,
-                  width: 250,
-                  borderRadius: 100
-                }}
-                loading={loading}
-                onPress={() => login()}
-                //  width="100%"
-                type="accent"
-                title={loading ? null : 'Login to your account'}
-              />
-            </View>
           </View>
-        </BouncingView>
+        </View>
       </View>
     </>
   );

apps/mobile/src/components/auth/sessionexpired.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Modal, View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
-import { useUserStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useUserStore } from '../../stores/use-user-store';
 import BiometricService from '../../services/biometrics';
 import {
   eSendEvent,

apps/mobile/src/components/auth/signup.js

@@ -1,21 +1,21 @@
 import React, { useRef, useState } from 'react';
 import { Dimensions, Platform, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useThemeStore } from '../../stores/theme';
-import { useUserStore } from '../../stores/stores';
 import { DDS } from '../../services/device-detection';
 import { eSendEvent, ToastEvent } from '../../services/event-manager';
 import { clearMessage, setEmailVerifyMessage } from '../../services/message';
 import PremiumService from '../../services/premium';
+import { useUserStore } from '../../stores/use-user-store';
+import { useThemeStore } from '../../stores/use-theme-store';
+import umami from '../../utils/analytics';
 import { db } from '../../utils/database';
 import { eCloseLoginDialog } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
 import { SIZE } from '../../utils/size';
 import { sleep } from '../../utils/time';
-import umami from '../../utils/analytics';
-import { IconButton } from '../ui/icon-button';
-import { Button } from '../ui/button';
 import BaseDialog from '../dialog/base-dialog';
+import { Button } from '../ui/button';
+import { IconButton } from '../ui/icon-button';
 import Input from '../ui/input';
 import { SvgView } from '../ui/svg';
 import { BouncingView } from '../ui/transitions/bouncing-view';
@@ -85,22 +85,6 @@ export const Signup = ({ changeMode, welcome, trial }) => {
 
   return (
     <>
-      {!welcome && (
-        <IconButton
-          name="arrow-left"
-          onPress={() => {
-            eSendEvent(eCloseLoginDialog);
-          }}
-          color={colors.pri}
-          customStyle={{
-            position: 'absolute',
-            zIndex: 999,
-            left: 12,
-            top: Platform.OS === 'ios' ? 12 + insets.top : 12
-          }}
-        />
-      )}
-
       {loading ? <BaseDialog transparent={true} visible={true} animation="fade" /> : null}
       <View
         style={{
@@ -117,179 +101,177 @@ export const Signup = ({ changeMode, welcome, trial }) => {
             overflow: 'hidden'
           }}
         >
-          <BouncingView initialScale={1.05} duration={5000}>
+          <BouncingView initialScale={1.05}>
             <SvgView src={SVG(colors.night ? colors.icon : 'black')} height={700} />
           </BouncingView>
         </View>
 
-        <BouncingView initialScale={0.98} duration={5000}>
-          <View
+        <View
+          style={{
+            width: '100%',
+            justifyContent: 'center',
+            alignSelf: 'center',
+            paddingHorizontal: 12,
+            marginBottom: 30,
+            marginTop: Dimensions.get('window').height < 700 ? -75 : 15
+          }}
+        >
+          <Heading
             style={{
-              width: '100%',
-              justifyContent: 'center',
-              alignSelf: 'center',
-              paddingHorizontal: 12,
-              marginBottom: 30,
-              marginTop: Dimensions.get('window').height < 700 ? -75 : 15
+              textAlign: 'center'
             }}
+            size={30}
+            color={colors.heading}
           >
-            <Heading
-              style={{
-                textAlign: 'center'
-              }}
-              size={30}
-              color={colors.heading}
-            >
-              Create your account
-            </Heading>
+            Create your account
+          </Heading>
+          <Paragraph
+            style={{
+              textDecorationLine: 'underline',
+              textAlign: 'center'
+            }}
+            onPress={() => {
+              changeMode(0);
+            }}
+            size={SIZE.md}
+          >
+            Already have an account? Log in
+          </Paragraph>
+        </View>
+        <View
+          style={{
+            width: '100%',
+            padding: 12,
+            backgroundColor: colors.bg,
+            flexGrow: 1
+          }}
+        >
+          <Input
+            fwdRef={emailInputRef}
+            onChangeText={value => {
+              email.current = value;
+            }}
+            testID="input.email"
+            onErrorCheck={e => setError(e)}
+            returnKeyLabel="Next"
+            returnKeyType="next"
+            autoComplete="email"
+            validationType="email"
+            autoCorrect={false}
+            autoCapitalize="none"
+            errorMessage="Email is invalid"
+            placeholder="Email"
+            onSubmit={() => {
+              passwordInputRef.current?.focus();
+            }}
+          />
+
+          <Input
+            fwdRef={passwordInputRef}
+            onChangeText={value => {
+              password.current = value;
+            }}
+            testID="input.password"
+            onErrorCheck={e => setError(e)}
+            returnKeyLabel="Next"
+            returnKeyType="next"
+            secureTextEntry
+            autoComplete="password"
+            autoCapitalize="none"
+            validationType="password"
+            autoCorrect={false}
+            placeholder="Password"
+            onSubmit={() => {
+              confirmPasswordInputRef.current?.focus();
+            }}
+          />
+
+          <Input
+            fwdRef={confirmPasswordInputRef}
+            onChangeText={value => {
+              confirmPassword.current = value;
+            }}
+            testID="input.confirmPassword"
+            onErrorCheck={e => setError(e)}
+            returnKeyLabel="Signup"
+            returnKeyType="done"
+            secureTextEntry
+            autoComplete="password"
+            autoCapitalize="none"
+            autoCorrect={false}
+            validationType="confirmPassword"
+            customValidator={() => password.current}
+            placeholder="Confirm password"
+            marginBottom={5}
+            onSubmit={signup}
+          />
+          <Paragraph size={SIZE.xs} color={colors.icon}>
+            By signing up, you agree to our{' '}
             <Paragraph
-              style={{
-                textDecorationLine: 'underline',
-                textAlign: 'center'
-              }}
+              size={SIZE.xs}
               onPress={() => {
-                changeMode(0);
+                openLinkInBrowser('https://notesnook.com/tos', colors)
+                  .catch(e => {})
+                  .then(r => {});
               }}
-              size={SIZE.md}
+              style={{
+                textDecorationLine: 'underline'
+              }}
+              color={colors.accent}
             >
-              Already have an account? Log in
+              terms of service{' '}
             </Paragraph>
-          </View>
+            and{' '}
+            <Paragraph
+              size={SIZE.xs}
+              onPress={() => {
+                openLinkInBrowser('https://notesnook.com/privacy', colors)
+                  .catch(e => {})
+                  .then(r => {});
+              }}
+              style={{
+                textDecorationLine: 'underline'
+              }}
+              color={colors.accent}
+            >
+              privacy policy.
+            </Paragraph>
+          </Paragraph>
+
           <View
             style={{
-              width: '100%',
-              padding: 12,
-              backgroundColor: colors.bg,
-              flexGrow: 1
+              marginTop: 50,
+              alignSelf: 'center'
             }}
           >
-            <Input
-              fwdRef={emailInputRef}
-              onChangeText={value => {
-                email.current = value;
-              }}
-              testID="input.email"
-              onErrorCheck={e => setError(e)}
-              returnKeyLabel="Next"
-              returnKeyType="next"
-              autoComplete="email"
-              validationType="email"
-              autoCorrect={false}
-              autoCapitalize="none"
-              errorMessage="Email is invalid"
-              placeholder="Email"
-              onSubmit={() => {
-                passwordInputRef.current?.focus();
-              }}
-            />
-
-            <Input
-              fwdRef={passwordInputRef}
-              onChangeText={value => {
-                password.current = value;
-              }}
-              testID="input.password"
-              onErrorCheck={e => setError(e)}
-              returnKeyLabel="Next"
-              returnKeyType="next"
-              secureTextEntry
-              autoComplete="password"
-              autoCapitalize="none"
-              validationType="password"
-              autoCorrect={false}
-              placeholder="Password"
-              onSubmit={() => {
-                confirmPasswordInputRef.current?.focus();
-              }}
-            />
-
-            <Input
-              fwdRef={confirmPasswordInputRef}
-              onChangeText={value => {
-                confirmPassword.current = value;
-              }}
-              testID="input.confirmPassword"
-              onErrorCheck={e => setError(e)}
-              returnKeyLabel="Signup"
-              returnKeyType="done"
-              secureTextEntry
-              autoComplete="password"
-              autoCapitalize="none"
-              autoCorrect={false}
-              validationType="confirmPassword"
-              customValidator={() => password.current}
-              placeholder="Confirm password"
-              marginBottom={5}
-              onSubmit={signup}
-            />
-            <Paragraph size={SIZE.xs} color={colors.icon}>
-              By signing up, you agree to our{' '}
-              <Paragraph
-                size={SIZE.xs}
-                onPress={() => {
-                  openLinkInBrowser('https://notesnook.com/tos', colors)
-                    .catch(e => {})
-                    .then(r => {});
-                }}
-                style={{
-                  textDecorationLine: 'underline'
-                }}
-                color={colors.accent}
-              >
-                terms of service{' '}
-              </Paragraph>
-              and{' '}
-              <Paragraph
-                size={SIZE.xs}
-                onPress={() => {
-                  openLinkInBrowser('https://notesnook.com/privacy', colors)
-                    .catch(e => {})
-                    .then(r => {});
-                }}
-                style={{
-                  textDecorationLine: 'underline'
-                }}
-                color={colors.accent}
-              >
-                privacy policy.
-              </Paragraph>
-            </Paragraph>
-
-            <View
+            <Button
               style={{
-                marginTop: 50,
-                alignSelf: 'center'
+                marginTop: 10,
+                width: 250,
+                borderRadius: 100
               }}
-            >
+              loading={loading}
+              onPress={signup}
+              type="accent"
+              title={loading ? null : 'Agree and continue'}
+            />
+
+            {loading || !welcome ? null : (
               <Button
                 style={{
                   marginTop: 10,
                   width: 250,
                   borderRadius: 100
                 }}
-                loading={loading}
-                onPress={signup}
-                type="accent"
-                title={loading ? null : 'Agree and continue'}
+                onPress={() => {
+                  eSendEvent(eCloseLoginDialog);
+                }}
+                type="grayBg"
+                title="Skip for now"
               />
-
-              {loading || !welcome ? null : (
-                <Button
-                  style={{
-                    marginTop: 10,
-                    width: 250,
-                    borderRadius: 100
-                  }}
-                  onPress={() => {
-                    eSendEvent(eCloseLoginDialog);
-                  }}
-                  type="grayBg"
-                  title="Skip for now"
-                />
-              )}
-            </View>
+            )}
           </View>
-        </BouncingView>
+        </View>
       </View>
     </>
   );

apps/mobile/src/components/auth/twofactor.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { eSendEvent, presentSheet } from '../../services/event-manager';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eCloseProgressDialog } from '../../utils/events';
 import useTimer from '../../utils/hooks/use-timer';
 import { SIZE } from '../../utils/size';

apps/mobile/src/components/container/containerheader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
-import { useSelectionStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useSelectionStore } from '../../stores/use-selection-store';
 
 export const ContainerHeader = ({ children }) => {
   const colors = useThemeStore(state => state.colors);

apps/mobile/src/components/container/floatingbutton.js

@@ -9,12 +9,12 @@ import Animated, {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../e2e/test.ids';
-import { useSelectionStore, useSettingStore } from '../../stores/stores';
+import { useSelectionStore } from '../../stores/use-selection-store';
+import { useSettingStore } from '../../stores/use-setting-store';
 import { editing, getElevation, showTooltip, TOOLTIP_POSITIONS } from '../../utils';
 import { normalize, SIZE } from '../../utils/size';
 import { PressableButton } from '../ui/pressable';
 
-const translateY = new Animated.Value(0);
 export const FloatingButton = ({ title, onPress, color = 'accent', shouldShow = false }) => {
   const insets = useSafeAreaInsets();
   const deviceMode = useSettingStore(state => state.deviceMode);
@@ -77,7 +77,7 @@ export const FloatingButton = ({ title, onPress, color = 'accent', shouldShow =
               ? Platform.isPad
                 ? insets.bottom - 12
                 : insets.bottom - 24
-              : insets.bottom + 12,
+              : insets.bottom,
           zIndex: 10
         },
         animatedStyle

apps/mobile/src/components/container/index.js

@@ -1,24 +1,24 @@
 import React from 'react';
 import { KeyboardAvoidingView, Platform, SafeAreaView } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import useIsFloatingKeyboard from '../../utils/hooks/use-is-floating-keyboard';
+import { Header } from '../header';
+import SelectionHeader from '../selection-header';
 export const Container = ({ children }) => {
-  const colors = useThemeStore(state => state.colors);
   const floating = useIsFloatingKeyboard();
   return (
     <KeyboardAvoidingView
       behavior="padding"
       enabled={Platform.OS === 'ios' && !floating}
       style={{
-        backgroundColor: colors.bg,
-        width: '100%',
-        height: '100%'
+        flex: 1
       }}
     >
+      <SelectionHeader />
+      <Header title="Header" screen="Header" />
       <SafeAreaView
         style={{
-          height: '100%',
-          backgroundColor: colors.bg,
+          flex: 1,
           overflow: 'hidden'
         }}
       >

apps/mobile/src/components/dialog/BaseDialog.js

@@ -8,7 +8,7 @@ import {
   TouchableOpacity,
   View
 } from 'react-native';
-import { useSettingStore } from '../../stores/stores';
+import { useSettingStore } from '../../stores/use-setting-store';
 import useIsFloatingKeyboard from '../../utils/hooks/use-is-floating-keyboard';
 import { BouncingView } from '../ui/transitions/bouncing-view';
 

apps/mobile/src/components/dialog/DialogButtons.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import { Button } from '../ui/button';
 import Paragraph from '../ui/typography/paragraph';

apps/mobile/src/components/dialog/DialogContainer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { DDS } from '../../services/device-detection';
 import { getElevation } from '../../utils';
 

apps/mobile/src/components/dialog/DialogHeader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from 'react-native';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import { Button } from '../ui/button';
 import { PressableButtonProps } from '../ui/pressable';

apps/mobile/src/components/dialog/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { DDS } from '../../services/device-detection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
 import { getElevation } from '../../utils';

apps/mobile/src/components/dialogprovider/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { EditorSettings } from '../../screens/editor/EditorSettings';
 import { AddNotebookSheet } from '../sheets/add-notebook';
 import { AddTopicDialog } from '../dialogs/add-topic';

apps/mobile/src/components/dialogs/addtopic/index.js

@@ -1,7 +1,7 @@
 import React, { createRef } from 'react';
 import { Keyboard, LayoutAnimation, UIManager, View } from 'react-native';
 import { Transition, Transitioning, TransitioningView } from 'react-native-reanimated';
-import { useMenuStore } from '../../../stores/stores';
+import { useMenuStore } from '../../../stores/use-menu-store';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
 import { db } from '../../../utils/database';
@@ -54,11 +54,7 @@ export class AddTopicDialog extends React.Component {
       }
       this.setState({ loading: false });
       this.close();
-      Navigation.setRoutesToUpdate([
-        Navigation.routeNames.Notebooks,
-        Navigation.routeNames.Notebook,
-        Navigation.routeNames.NotesPage
-      ]);
+      Navigation.queueRoutesForUpdate('Notebooks', 'Notebook', 'TopicNotes');
       useMenuStore.getState().setMenuPins();
     } catch (e) {}
   };

apps/mobile/src/components/dialogs/jumptosection/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
-import { useMessageStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useMessageStore } from '../../../stores/use-message-store';
 import { DDS } from '../../../services/device-detection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../../services/event-manager';
 import { getElevation } from '../../../utils';

apps/mobile/src/components/dialogs/result/ProFeatures.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../../stores/theme';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { eSendEvent } from '../../../services/event-manager';
 import {
   eCloseProgressDialog,

apps/mobile/src/components/dialogs/result/index.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { DDS } from '../../../services/device-detection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../../services/event-manager';
 import { getElevation } from '../../../utils';

apps/mobile/src/components/dialogs/vault/index.js

@@ -187,17 +187,15 @@ export class VaultDialog extends Component {
       });
       return;
     }
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.Notes
-    ]);
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.Notes,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Notebook
-    ]);
+
+    Navigation.queueRoutesForUpdate(
+      'Notes',
+      'Favorites',
+      'TopicNotes',
+      'TaggedNotes',
+      'ColoredNotes'
+    );
+
     this.password = null;
     this.confirmPassword = null;
     SearchService.updateAndSearch();

apps/mobile/src/components/header/index.js

@@ -2,23 +2,24 @@ import React, { useEffect, useState } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eScrollEvent } from '../../utils/events';
 import { LeftMenus } from './left-menus';
 import { RightMenus } from './right-menus';
 import { Title } from './title';
 
 export const Header = React.memo(
-  ({ root, title, screen, isBack, color, action, rightButtons, notebook, onBackPress }) => {
+  () => {
     const colors = useThemeStore(state => state.colors);
     const insets = useSafeAreaInsets();
     const [hide, setHide] = useState(true);
 
     const onScroll = data => {
-      if (data.screen !== screen) return;
       if (data.y > 150) {
+        if (!hide) return;
         setHide(false);
       } else {
+        if (hide) return;
         setHide(true);
       }
     };
@@ -28,7 +29,7 @@ export const Header = React.memo(
       return () => {
         eUnSubscribeEvent(eScrollEvent, onScroll);
       };
-    }, []);
+    }, [hide]);
 
     return (
       <View
@@ -45,22 +46,14 @@ export const Header = React.memo(
         ]}
       >
         <View style={styles.leftBtnContainer}>
-          <LeftMenus onBackPress={onBackPress} headerMenuState={!isBack} currentScreen={screen} />
-
-          <Title
-            notebook={notebook}
-            headerColor={color}
-            heading={title}
-            screen={screen}
-            root={root}
-          />
+          <LeftMenus />
+          <Title />
         </View>
-
-        <RightMenus rightButtons={rightButtons} action={action} currentScreen={screen} />
+        <RightMenus />
       </View>
     );
   },
-  (prev, next) => prev.title === next.title
+  () => true
 );
 
 const styles = StyleSheet.create({

apps/mobile/src/components/header/leftmenus.js

@@ -1,52 +1,50 @@
 import React from 'react';
 import { notesnook } from '../../../e2e/test.ids';
-import { useThemeStore } from '../../stores/theme';
-import { useSettingStore } from '../../stores/stores';
 import { DDS } from '../../services/device-detection';
 import Navigation from '../../services/navigation';
+import useNavigationStore from '../../stores/use-navigation-store';
+import { useSettingStore } from '../../stores/use-setting-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { IconButton } from '../ui/icon-button';
 
-export const LeftMenus = ({ currentScreen, headerMenuState, onBackPress }) => {
+export const LeftMenus = () => {
   const colors = useThemeStore(state => state.colors);
   const deviceMode = useSettingStore(state => state.deviceMode);
+  const canGoBack = useNavigationStore(state => state.canGoBack);
+  const isTablet = deviceMode === 'tablet';
 
   const onLeftButtonPress = () => {
-    if (onBackPress) return onBackPress();
-    if (headerMenuState) {
+    if (!canGoBack) {
       Navigation.openDrawer();
       return;
     }
     Navigation.goBack();
   };
 
-  return (
-    <>
-      {deviceMode !== 'tablet' || currentScreen === 'Search' || !headerMenuState ? (
-        <IconButton
-          testID={notesnook.ids.default.header.buttons.left}
-          customStyle={{
-            justifyContent: 'center',
-            alignItems: 'center',
-            height: 40,
-            width: 40,
-            borderRadius: 100,
-            marginLeft: -5,
-            marginRight: DDS.isLargeTablet() ? 10 : 25
-          }}
-          left={40}
-          top={40}
-          right={DDS.isLargeTablet() ? 10 : 25}
-          onPress={onLeftButtonPress}
-          onLongPress={() => {
-            Navigation.popToTop();
-          }}
-          name={!headerMenuState ? 'arrow-left' : 'menu'}
-          color={colors.pri}
-          iconStyle={{
-            marginLeft: !headerMenuState ? -5 : 0
-          }}
-        />
-      ) : undefined}
-    </>
+  return isTablet ? null : (
+    <IconButton
+      testID={notesnook.ids.default.header.buttons.left}
+      customStyle={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 40,
+        width: 40,
+        borderRadius: 100,
+        marginLeft: -5,
+        marginRight: DDS.isLargeTablet() ? 10 : 25
+      }}
+      left={40}
+      top={40}
+      right={DDS.isLargeTablet() ? 10 : 25}
+      onPress={onLeftButtonPress}
+      onLongPress={() => {
+        Navigation.popToTop();
+      }}
+      name={canGoBack ? 'arrow-left' : 'menu'}
+      color={colors.pri}
+      iconStyle={{
+        marginLeft: canGoBack ? -5 : 0
+      }}
+    />
   );
 };

apps/mobile/src/components/header/rightmenus.js

@@ -2,24 +2,30 @@ import React, { useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
 import Menu from 'react-native-reanimated-material-menu';
 import { notesnook } from '../../../e2e/test.ids';
-import { useThemeStore } from '../../stores/theme';
-import { useSettingStore } from '../../stores/stores';
 import Navigation from '../../services/navigation';
+import SearchService from '../../services/search';
+import useNavigationStore from '../../stores/use-navigation-store';
+import { useSettingStore } from '../../stores/use-setting-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import { Button } from '../ui/button';
 import { IconButton } from '../ui/icon-button';
 
-export const RightMenus = ({ currentScreen, action, rightButtons }) => {
+export const RightMenus = () => {
   const colors = useThemeStore(state => state.colors);
   const deviceMode = useSettingStore(state => state.deviceMode);
+  const rightButtons = useNavigationStore(state => state.headerRightButtons);
+  const currentScreen = useNavigationStore(state => state.currentScreen.name);
   const menuRef = useRef();
+
   return (
     <View style={styles.rightBtnContainer}>
       {!currentScreen.startsWith('Settings') ? (
         <IconButton
           onPress={async () => {
-            Navigation.navigate('Search', {
-              menu: false
+            SearchService.prepareSearch();
+            Navigation.navigate({
+              name: 'Search'
             });
           }}
           testID="icon-search"
@@ -31,7 +37,7 @@ export const RightMenus = ({ currentScreen, action, rightButtons }) => {
 
       {deviceMode !== 'mobile' ? (
         <Button
-          onPress={action}
+          onPress={RightMenus.floatingButtonAction}
           testID={notesnook.ids.default.addBtn}
           icon={currentScreen === 'Trash' ? 'delete' : 'plus'}
           iconSize={SIZE.xl}
@@ -54,7 +60,7 @@ export const RightMenus = ({ currentScreen, action, rightButtons }) => {
         />
       ) : null}
 
-      {rightButtons ? (
+      {rightButtons && rightButtons.length > 0 ? (
         <Menu
           ref={menuRef}
           animationDuration={200}
@@ -67,7 +73,6 @@ export const RightMenus = ({ currentScreen, action, rightButtons }) => {
               onPress={() => {
                 menuRef.current?.show();
               }}
-              //testID={notesnook.ids.default.header.buttons.left}
               name="dots-vertical"
               color={colors.pri}
               customStyle={styles.rightBtn}
@@ -87,7 +92,7 @@ export const RightMenus = ({ currentScreen, action, rightButtons }) => {
               }}
               key={item.title}
               title={item.title}
-              onPress={item.func}
+              onPress={item.onPress}
             />
           ))}
         </Menu>
@@ -96,6 +101,8 @@ export const RightMenus = ({ currentScreen, action, rightButtons }) => {
   );
 };
 
+RightMenus.floatingButtonAction = () => {};
+
 const styles = StyleSheet.create({
   rightBtnContainer: {
     flexDirection: 'row',

apps/mobile/src/components/header/title.js

@@ -1,51 +1,76 @@
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
-import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
+import Animated, { Layout } from 'react-native-reanimated';
+import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
-import { eOnNewTopicAdded, eScrollEvent } from '../../utils/events';
+import useNavigationStore from '../../stores/use-navigation-store';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { db } from '../../utils/database';
+import { eScrollEvent } from '../../utils/events';
 import { SIZE } from '../../utils/size';
 import Heading from '../ui/typography/heading';
 import Paragraph from '../ui/typography/paragraph';
 
-export const Title = ({ heading, headerColor, screen, notebook }) => {
+const titleState = {};
+
+export const Title = () => {
   const colors = useThemeStore(state => state.colors);
-  const [hide, setHide] = useState(screen === 'Notebook' ? true : false);
+  const currentScreen = useNavigationStore(state => state.currentScreen);
+  const isTopic = currentScreen.type === 'topic';
+  const [hide, setHide] = useState(isTopic ? true : false);
+  const isHidden = titleState[currentScreen.id];
+  const notebook = isTopic ? db.notebooks?.notebook(currentScreen.notebookId)?.data : null;
+  const title = currentScreen.title;
+  const isTag = title.slice(0, 1) === '#';
 
   const onScroll = data => {
-    if (screen !== 'Notebook') {
+    if (currentScreen.name !== 'Notebook') {
       setHide(false);
       return;
     }
     if (data.y > 150) {
+      if (!hide) return;
       setHide(false);
     } else {
+      if (hide) return;
       setHide(true);
     }
   };
 
+  useEffect(() => {
+    if (currentScreen.name === 'Notebook') {
+      let value =
+        typeof titleState[currentScreen.id] === 'boolean' ? titleState[currentScreen.id] : true;
+      setHide(value);
+    } else {
+      setHide(titleState[currentScreen.id]);
+    }
+  }, [currentScreen.id]);
+
+  useEffect(() => {
+    titleState[currentScreen.id] = hide;
+  }, [hide]);
+
   useEffect(() => {
     eSubscribeEvent(eScrollEvent, onScroll);
     return () => {
       eUnSubscribeEvent(eScrollEvent, onScroll);
     };
-  }, []);
+  }, [hide]);
 
   function navigateToNotebook() {
-    if (!notebook) return;
-    let routeName = 'Notebook';
-    let params = {
-      menu: false,
-      notebook: notebook,
-      title: notebook.title
-    };
-    let headerState = {
-      heading: notebook.title,
-      id: notebook.id,
-      type: notebook.type
-    };
-    eSendEvent(eOnNewTopicAdded, params);
-    Navigation.navigate(routeName, params, headerState);
+    if (!isTopic) return;
+    Navigation.navigate(
+      {
+        name: 'Notebook',
+        id: isTopic.id,
+        type: isTopic.type
+      },
+      {
+        notebook: isTopic,
+        title: isTopic.title
+      }
+    );
   }
 
   return (
@@ -56,24 +81,28 @@ export const Title = ({ heading, headerColor, screen, notebook }) => {
         flexDirection: 'row'
       }}
     >
-      {!hide ? (
+      {!hide && !isHidden ? (
         <Heading
           onPress={navigateToNotebook}
-          numberOfLines={notebook ? 2 : 1}
-          size={notebook ? SIZE.md + 2 : SIZE.xl}
+          numberOfLines={isTopic ? 2 : 1}
+          size={isTopic ? SIZE.md + 2 : SIZE.xl}
           style={{
             flexWrap: 'wrap'
           }}
-          color={headerColor}
+          color={currentScreen.color}
         >
-          {notebook ? (
+          {isTopic ? (
             <Paragraph numberOfLines={1} size={SIZE.xs + 1}>
               {notebook?.title}
               {'\n'}
             </Paragraph>
           ) : null}
-          <Heading color={colors.accent}>{heading.slice(0, 1) === '#' ? '#' : null}</Heading>
-          {heading.slice(0, 1) === '#' ? heading.slice(1) : heading}
+          {isTag ? (
+            <Heading size={isTopic ? SIZE.md + 2 : SIZE.xl} color={colors.accent}>
+              #
+            </Heading>
+          ) : null}
+          {isTag ? title.slice(1) : title}
         </Heading>
       ) : null}
     </View>

apps/mobile/src/components/intro/index.js

@@ -5,8 +5,8 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import AppLock from '../../screens/settings/app-lock';
 import SettingsService from '../../services/settings';
-import { useSettingStore } from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
+import { useSettingStore } from '../../stores/use-setting-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { getElevation } from '../../utils';
 import umami from '../../utils/analytics';
 import { SIZE } from '../../utils/size';

apps/mobile/src/components/intro/welcome.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import umami from '../../utils/analytics';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eSendEvent } from '../../services/event-manager';
 import { getElevation } from '../../utils';
 import { eCloseProgressDialog, eOpenLoginDialog } from '../../utils/events';

apps/mobile/src/components/launcher/index.js

@@ -9,15 +9,13 @@ import { eSendEvent, presentSheet, ToastEvent } from '../../services/event-manag
 import { setRateAppMessage } from '../../services/message';
 import PremiumService from '../../services/premium';
 import SettingsService from '../../services/settings';
-import {
-  initialize,
-  useFavoriteStore,
-  useMessageStore,
-  useNoteStore,
-  useSettingStore,
-  useUserStore
-} from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
+import { initialize } from '../../stores';
+import { useUserStore } from '../../stores/use-user-store';
+import { useMessageStore } from '../../stores/use-message-store';
+import { useSettingStore } from '../../stores/use-setting-store';
+import { useFavoriteStore } from '../../stores/use-favorite-store';
+import { useNoteStore } from '../../stores/use-notes-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { editing } from '../../utils';
 import { db } from '../../utils/database';
 import { MMKV } from '../../utils/database/mmkv';
@@ -52,9 +50,10 @@ const Launcher = React.memo(
     const deviceMode = useSettingStore(state => state.deviceMode);
     const passwordInputRef = useRef();
     const password = useRef();
+    const introCompleted = SettingsService.get().introCompleted;
     const [requireIntro, setRequireIntro] = useState({
-      updated: false,
-      value: false
+      updated: introCompleted,
+      value: !introCompleted
     });
     const dbInitCompleted = useRef(false);
 
@@ -63,18 +62,20 @@ const Launcher = React.memo(
         return;
       }
       await restoreEditorState();
-      await db.notes.init();
-      setNotes();
-      setFavorites();
-      setLoading(false);
-      Walkthrough.init();
+      setImmediate(() => {
+        db.notes.init().then(() => {
+          setNotes();
+          setFavorites();
+          setLoading(false);
+          Walkthrough.init();
+        });
+      });
     };
 
     const init = async () => {
       if (!dbInitCompleted.current) {
         await db.init();
         initialize();
-        useUserStore.getState().setUser(await db.user.getUser());
         dbInitCompleted.current = true;
       }
 
@@ -84,7 +85,7 @@ const Launcher = React.memo(
     };
 
     const hideSplashScreen = async () => {
-      await sleep(requireIntro.value ? 500 : 0);
+      if (requireIntro.value) await sleep(500);
       await RNBootSplash.hide({ fade: true });
       setTimeout(async () => {
         if (Platform.OS === 'android') {
@@ -100,22 +101,22 @@ const Launcher = React.memo(
         } else {
           StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
         }
-      }, 500);
+      }, 1000);
     };
 
     useEffect(() => {
+      console.log('hide splash', requireIntro.updated);
       if (requireIntro.updated) {
         hideSplashScreen();
+        return;
       }
-    }, [requireIntro, verifyUser]);
-
-    useEffect(() => {
       let introCompleted = SettingsService.get().introCompleted;
+      console.log(requireIntro);
       setRequireIntro({
         updated: true,
         value: !introCompleted
       });
-    }, []);
+    }, [requireIntro, verifyUser]);
 
     useEffect(() => {
       if (!loading) {

apps/mobile/src/components/list/card.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { View } from 'react-native';
 import Animated, { FadeInUp, FadeOutUp } from 'react-native-reanimated';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useMessageStore, useSelectionStore } from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
+import { useSelectionStore } from '../../stores/use-selection-store';
+import { useMessageStore } from '../../stores/use-message-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { hexToRGBA } from '../../utils/color-scheme/utils';
 import { SIZE } from '../../utils/size';
 import { PressableButton } from '../ui/pressable';

apps/mobile/src/components/list/empty.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ActivityIndicator, useWindowDimensions, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useThemeStore } from '../../stores/theme';
-import { useSettingStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useSettingStore } from '../../stores/use-setting-store';
 import { useTip } from '../../services/tip-manager';
 import { COLORS_NOTE } from '../../utils/color-scheme';
 import { SIZE } from '../../utils/size';

apps/mobile/src/components/list/index.js

@@ -3,8 +3,7 @@ import { FlatList, RefreshControl, View } from 'react-native';
 import { notesnook } from '../../../e2e/test.ids';
 import { eSendEvent } from '../../services/event-manager';
 import Sync from '../../services/sync';
-import { useUserStore } from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { db } from '../../utils/database';
 import { eScrollEvent } from '../../utils/events';
 import { tabBarRef } from '../../utils/global-refs';
@@ -56,7 +55,8 @@ const List = ({
   placeholderData,
   loading,
   headerProps = {
-    heading: 'Home'
+    heading: 'Home',
+    color: null
   },
   screen,
   ListHeader,
@@ -65,11 +65,11 @@ const List = ({
   const colors = useThemeStore(state => state.colors);
   const scrollRef = useRef();
   const [_loading, _setLoading] = useState(true);
-  const syncing = useUserStore(state => state.syncing);
 
   useEffect(() => {
     let timeout = null;
     if (!loading) {
+      console.log('LOADING ENDED');
       timeout = setTimeout(
         () => {
           _setLoading(false);
@@ -77,6 +77,7 @@ const List = ({
         listData.length === 0 ? 0 : 300
       );
     } else {
+      console.log('STILL LOADING');
       _setLoading(true);
     }
     return () => {
@@ -149,7 +150,7 @@ const List = ({
             colors={[colors.accent]}
             progressBackgroundColor={colors.nav}
             onRefresh={_onRefresh}
-            refreshing={syncing}
+            refreshing={false}
           />
         }
         ListEmptyComponent={
@@ -169,9 +170,6 @@ const List = ({
             ) : (
               <Header
                 title={headerProps.heading}
-                paragraph={headerProps.paragraph}
-                onPress={headerProps.onPress}
-                icon={headerProps.icon}
                 color={headerProps.color}
                 type={type}
                 screen={screen}

apps/mobile/src/components/listitems/headers/header.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
-import { useMessageStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useMessageStore } from '../../../stores/use-message-store';
 import { COLORS_NOTE } from '../../../utils/color-scheme';
 import { Announcement } from '../../announcements/announcement';
 import { Card } from '../../list/card';

apps/mobile/src/components/listitems/headers/notebookheader.js

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
-import { useMenuStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useMenuStore } from '../../../stores/use-menu-store';
 import { ToastEvent } from '../../../services/event-manager';
 import { getTotalNotes } from '../../../utils';
 import { db } from '../../../utils/database';

apps/mobile/src/components/listitems/headers/sectionheader.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { TouchableOpacity, useWindowDimensions, View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
-import { useSettingStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useSettingStore } from '../../../stores/use-setting-store';
 import {
   eSendEvent,
   eSubscribeEvent,

apps/mobile/src/components/listitems/note/index.js

@@ -3,8 +3,8 @@ import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../../e2e/test.ids';
-import { useThemeStore } from '../../../stores/theme';
-import { useSettingStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useSettingStore } from '../../../stores/use-setting-store';
 import { eSendEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
 import { COLORS_NOTE } from '../../../utils/color-scheme';
@@ -19,32 +19,33 @@ import Heading from '../../ui/typography/heading';
 import Paragraph from '../../ui/typography/paragraph';
 
 const navigateToTopic = topic => {
-  let routeName = 'NotesPage';
-  let params = { ...topic, menu: false, get: 'topics' };
-  let headerState = {
-    heading: topic.title,
-    id: topic.id,
-    type: topic.type
-  };
-  eSendEvent(refreshNotesPage, params);
-  Navigation.navigate(routeName, params, headerState);
+  Navigation.navigate(
+    {
+      name: 'NotesPage',
+      title: topic.title,
+      id: topic.id,
+      type: topic.type
+    },
+    { ...topic, menu: false, get: 'topics' }
+  );
 };
 
 function navigateToTag(item) {
-  let _tag = db.tags.tag(item.id);
-  if (!_tag) return;
-  let params = {
-    ..._tag,
-    type: 'tag',
-    get: 'tagged'
-  };
-
-  eSendEvent(refreshNotesPage, params);
-  Navigation.navigate('NotesPage', params, {
-    heading: '#' + _tag.title,
-    id: _tag.id,
-    type: _tag.type
-  });
+  const tag = db.tags.tag(item.id);
+  if (!tag) return;
+  Navigation.navigate(
+    {
+      name: 'NotesPage',
+      title: '#' + tag.title,
+      id: tag.id,
+      type: tag.type
+    },
+    {
+      ...tag,
+      type: 'tag',
+      get: 'tagged'
+    }
+  );
 }
 
 const showActionSheet = item => {

apps/mobile/src/components/listitems/note/wrapper.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import NoteItem from '.';
 import { notesnook } from '../../../../e2e/test.ids';
-import { useEditorStore, useSelectionStore, useTrashStore } from '../../../stores/stores';
+import { useSelectionStore } from '../../../stores/use-selection-store';
+import { useTrashStore } from '../../../stores/use-trash-store';
+import { useEditorStore } from '../../../stores/use-editor-store';
 import { DDS } from '../../../services/device-detection';
 import { eSendEvent, openVault, ToastEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
@@ -66,14 +68,16 @@ export const openNote = async (item, isTrash, setSelectedItem) => {
       negativeText: 'Delete',
       positivePress: async () => {
         await db.trash.restore(item.id);
-        Navigation.setRoutesToUpdate([
-          Navigation.routeNames.Tags,
-          Navigation.routeNames.Notes,
-          Navigation.routeNames.Notebooks,
-          Navigation.routeNames.NotesPage,
-          Navigation.routeNames.Favorites,
-          Navigation.routeNames.Trash
-        ]);
+        Navigation.queueRoutesForUpdate(
+          'Tags',
+          'Notes',
+          'Notebooks',
+          'Favorites',
+          'Trash',
+          'TaggedNotes',
+          'ColoredNotes',
+          'TopicNotes'
+        );
         useSelectionStore.getState().setSelectionMode(false);
         ToastEvent.show({
           heading: 'Restore successful',

apps/mobile/src/components/listitems/notebook/index.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../../e2e/test.ids';
-import { useThemeStore } from '../../../stores/theme';
-import { useSettingStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useSettingStore } from '../../../stores/use-setting-store';
 import { eSendEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
 import { getTotalNotes, history } from '../../../utils';
@@ -27,15 +27,15 @@ export const NotebookItem = ({ item, isTopic = false, notebookID, isTrash, dateB
 
   const navigateToTopic = topic => {
     if (history.selectedItemsList.length > 0) return;
-    let routeName = 'NotesPage';
-    let params = { ...topic, menu: false, get: 'topics' };
-    let headerState = {
-      heading: topic.title,
-      id: topic.id,
-      type: topic.type
-    };
-    eSendEvent(refreshNotesPage, params);
-    Navigation.navigate(routeName, params, headerState);
+    Navigation.navigate(
+      {
+        name: 'NotesPage',
+        title: topic.title,
+        id: topic.id,
+        type: topic.type
+      },
+      { ...topic, menu: false, get: 'topics' }
+    );
   };
 
   return (

apps/mobile/src/components/listitems/notebook/wrapper.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import { NotebookItem } from '.';
-import { eSendEvent, ToastEvent } from '../../../services/event-manager';
+import Notebook from '../../../screens/notebook';
+import { TopicNotes } from '../../../screens/notes/topic-notes';
+import { ToastEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
-import { useSelectionStore, useTrashStore } from '../../../stores/stores';
+import { useSelectionStore } from '../../../stores/use-selection-store';
+import { useTrashStore } from '../../../stores/use-trash-store';
 import { history } from '../../../utils';
-import { eOnNewTopicAdded, refreshNotesPage } from '../../../utils/events';
+import { db } from '../../../utils/database';
 import { presentDialog } from '../../dialog/functions';
 import SelectionWrapper from '../selection-wrapper';
-import { db } from '../../../utils/database';
 
 export const NotebookWrapper = React.memo(
   ({ item, index, dateBy }) => {
@@ -30,14 +32,16 @@ export const NotebookWrapper = React.memo(
           negativeText: 'Delete',
           positivePress: async () => {
             await db.trash.restore(item.id);
-            Navigation.setRoutesToUpdate([
-              Navigation.routeNames.Tags,
-              Navigation.routeNames.Notes,
-              Navigation.routeNames.Notebooks,
-              Navigation.routeNames.NotesPage,
-              Navigation.routeNames.Favorites,
-              Navigation.routeNames.Trash
-            ]);
+            Navigation.queueRoutesForUpdate(
+              'Tags',
+              'Notes',
+              'Notebooks',
+              'Favorites',
+              'Trash',
+              'TaggedNotes',
+              'ColoredNotes',
+              'TopicNotes'
+            );
             useSelectionStore.getState().setSelectionMode(false);
             ToastEvent.show({
               heading: 'Restore successful',
@@ -57,28 +61,11 @@ export const NotebookWrapper = React.memo(
         });
         return;
       }
-
-      let routeName = item.type === 'topic' ? 'NotesPage' : 'Notebook';
-
-      let params =
-        item.type === 'topic'
-          ? { ...item, menu: false }
-          : {
-              menu: false,
-              notebook: item,
-              title: item.title
-            };
-      let headerState = {
-        heading: item.title,
-        id: item.id,
-        type: item.type
-      };
       if (item.type === 'topic') {
-        eSendEvent(refreshNotesPage, params);
+        TopicNotes.navigate(item, true);
       } else {
-        eSendEvent(eOnNewTopicAdded, params);
+        Notebook.navigate(item, true);
       }
-      Navigation.navigate(routeName, params, headerState);
     };
     return (
       <SelectionWrapper

apps/mobile/src/components/listitems/selectionwrapper/actionstrip.js

@@ -1,16 +1,14 @@
 import Clipboard from '@react-native-clipboard/clipboard';
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
-import Animated, { SlideInUp, SlideOutDown, useValue } from 'react-native-reanimated';
+import Animated, { SlideInUp, SlideOutDown } from 'react-native-reanimated';
 import { openVault, ToastEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
-import {
-  useMenuStore,
-  useNotebookStore,
-  useSelectionStore,
-  useTrashStore
-} from '../../../stores/stores';
-import { useThemeStore } from '../../../stores/theme';
+import { useSelectionStore } from '../../../stores/use-selection-store';
+import { useTrashStore } from '../../../stores/use-trash-store';
+import { useMenuStore } from '../../../stores/use-menu-store';
+import { useNotebookStore } from '../../../stores/use-notebook-store';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { dWidth, getElevation, toTXT } from '../../../utils';
 import { db } from '../../../utils/database';
 import { deleteItems } from '../../../utils/functions';
@@ -28,18 +26,19 @@ export const ActionStrip = ({ note, setActionStrip }) => {
 
   const [isPinnedToMenu, setIsPinnedToMenu] = useState(false);
   const [width, setWidth] = useState(dWidth - 16);
-  const opacity = useValue(0);
   useEffect(() => {
     if (note.type === 'note') return;
     setIsPinnedToMenu(db.settings.isPinned(note.id));
   }, []);
 
   const updateNotes = () => {
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.Notes
-    ]);
+    Navigation.queueRoutesForUpdate(
+      'Notes',
+      'Favorites',
+      'ColoredNotes',
+      'TaggedNotes',
+      'TopicNotes'
+    );
   };
 
   const actions = [
@@ -155,13 +154,15 @@ export const ActionStrip = ({ note, setActionStrip }) => {
       icon: 'delete-restore',
       onPress: async () => {
         await db.trash.restore(note.id);
-        Navigation.setRoutesToUpdate([
-          Navigation.routeNames.Notes,
-          Navigation.routeNames.Notebooks,
-          Navigation.routeNames.NotesPage,
-          Navigation.routeNames.Favorites,
-          Navigation.routeNames.Trash
-        ]);
+        Navigation.queueRoutesForUpdate(
+          'Notes',
+          'Favorites',
+          'ColoredNotes',
+          'TaggedNotes',
+          'TopicNotes',
+          'Trash',
+          'Notebooks'
+        );
 
         ToastEvent.show({
           heading:

apps/mobile/src/components/listitems/selectionwrapper/backfill.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
-import { useEditorStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useEditorStore } from '../../../stores/use-editor-store';
 import { hexToRGBA } from '../../../utils/color-scheme/utils';
 
 export const Filler = ({ item, background }) => {

apps/mobile/src/components/listitems/selectionwrapper/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../../services/event-manager';
-import { useSettingStore } from '../../../stores/stores';
-import { useThemeStore } from '../../../stores/theme';
+import { useSettingStore } from '../../../stores/use-setting-store';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { history } from '../../../utils';
 import { PressableButton } from '../../ui/pressable';
 import { ActionStrip } from './action-strip';

apps/mobile/src/components/listitems/selectionwrapper/selection.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../../stores/theme';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { Actions } from '../../../stores/Actions';
-import { useSelectionStore } from '../../../stores/stores';
+import { useSelectionStore } from '../../../stores/use-selection-store';
 import { SIZE } from '../../../utils/size';
 
 export const SelectionIcon = ({ setActionStrip, item, compactMode }) => {

apps/mobile/src/components/listitems/tag/index.js

@@ -1,35 +1,21 @@
 import React from 'react';
-import { useWindowDimensions, View } from 'react-native';
+import { View } from 'react-native';
 import { notesnook } from '../../../../e2e/test.ids';
-import { PressableButton } from '../../ui/pressable';
-import { useThemeStore } from '../../../stores/theme';
-import { eSendEvent } from '../../../services/event-manager';
-import Navigation from '../../../services/navigation';
+import { TaggedNotes } from '../../../screens/notes/tagged';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { db } from '../../../utils/database';
-import { refreshNotesPage } from '../../../utils/events';
 import { SIZE } from '../../../utils/size';
-import { IconButton } from '../../ui/icon-button';
 import { Properties } from '../../properties';
+import { IconButton } from '../../ui/icon-button';
+import { PressableButton } from '../../ui/pressable';
 import Heading from '../../ui/typography/heading';
 import Paragraph from '../../ui/typography/paragraph';
 
 const TagItem = React.memo(
   ({ item, index }) => {
     const colors = useThemeStore(state => state.colors);
-    const { fontScale } = useWindowDimensions();
     const onPress = () => {
-      let params = {
-        ...item,
-        type: 'tag',
-        get: 'tagged'
-      };
-
-      eSendEvent(refreshNotesPage, params);
-      Navigation.navigate('NotesPage', params, {
-        heading: '#' + item.title,
-        id: item.id,
-        type: item.type
-      });
+      TaggedNotes.navigate(item, true);
     };
 
     return (

apps/mobile/src/components/mergeconflicts/index.js

@@ -5,7 +5,7 @@ import { Modal, Platform, SafeAreaView, Text, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import WebView from 'react-native-webview';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { DDS } from '../../services/device-detection';
 import {
   eSendEvent,
@@ -156,11 +156,13 @@ const MergeConflicts = () => {
       });
     }
     eSendEvent(refreshNotesPage);
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.Notes
-    ]);
+    Navigation.queueRoutesForUpdate(
+      'Notes',
+      'Favorites',
+      'ColoredNotes',
+      'TaggedNotes',
+      'TopicNotes'
+    );
     if (getNote()?.id === note.id) {
       updateNoteInEditor();
     }

apps/mobile/src/components/notehistory/index.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { Text, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { presentSheet } from '../../services/event-manager';
 import { db } from '../../utils/database';
 import { openLinkInBrowser } from '../../utils/functions';

apps/mobile/src/components/notehistory/preview.js

@@ -1,8 +1,8 @@
 import React, { useRef } from 'react';
 import { Alert, Platform, View } from 'react-native';
 import WebView from 'react-native-webview';
-import { useThemeStore } from '../../stores/theme';
-import { useEditorStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useEditorStore } from '../../stores/use-editor-store';
 import { eSendEvent, ToastEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
 import { db } from '../../utils/database';
@@ -78,11 +78,13 @@ export default function NotePreview({ session, content }) {
     }
     eSendEvent(eCloseProgressDialog, 'note_history');
     eSendEvent(eCloseProgressDialog);
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.Notes
-    ]);
+    Navigation.queueRoutesForUpdate(
+      'Notes',
+      'Favorites',
+      'ColoredNotes',
+      'TaggedNotes',
+      'TopicNotes'
+    );
 
     ToastEvent.show({
       heading: 'Note restored successfully',

apps/mobile/src/components/premium/component.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { ActivityIndicator, ScrollView, View } from 'react-native';
 import { LAUNCH_ROCKET } from '../../assets/images/assets';
-import { useThemeStore } from '../../stores/theme';
-import { useUserStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useUserStore } from '../../stores/use-user-store';
 import { DDS } from '../../services/device-detection';
 import { eSendEvent, presentSheet } from '../../services/event-manager';
 import PremiumService from '../../services/premium';

apps/mobile/src/components/premium/expiring.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
 import PremiumService from '../../services/premium';
 import { eOpenPremiumDialog, eOpenResultDialog, eOpenTrialEndingDialog } from '../../utils/events';

apps/mobile/src/components/premium/feature.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import Paragraph from '../ui/typography/paragraph';
 import { ProTag } from './pro-tag';

apps/mobile/src/components/premium/group.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ScrollView, View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import Heading from '../ui/typography/heading';
 import Paragraph from '../ui/typography/paragraph';

apps/mobile/src/components/premium/offer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import Paragraph from '../ui/typography/paragraph';
 

apps/mobile/src/components/premium/premiumtoast.js

@@ -5,7 +5,7 @@ import { EditorWebView } from '../../screens/editor/Functions';
 import tiny from '../../screens/editor/tiny/tiny';
 import { DDS } from '../../services/device-detection';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { editing, getElevation } from '../../utils';
 import { eCloseActionSheet, eOpenPremiumDialog, eShowGetPremium } from '../../utils/events';
 import { SIZE } from '../../utils/size';

apps/mobile/src/components/premium/pricingitem.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { getElevation } from '../../utils';
 import { SIZE } from '../../utils/size';
 import { PressableButton } from '../ui/pressable';

apps/mobile/src/components/premium/pricingplans.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { ActivityIndicator, Platform, Text, View } from 'react-native';
 import * as RNIap from 'react-native-iap';
-import { useThemeStore } from '../../stores/theme';
-import { useUserStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useUserStore } from '../../stores/use-user-store';
 import { eSendEvent, presentSheet, ToastEvent } from '../../services/event-manager';
 import PremiumService from '../../services/premium';
 import { db } from '../../utils/database';

apps/mobile/src/components/premium/protag.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import Paragraph from '../ui/typography/paragraph';
 
 export const ProTag = ({ width, size, background }) => {

apps/mobile/src/components/properties/colortags.js

@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../e2e/test.ids';
-import { useMenuStore, useSettingStore } from '../../stores/stores';
+import { useMenuStore } from '../../stores/use-menu-store';
+import { useSettingStore } from '../../stores/use-setting-store';
 import { DDS } from '../../services/device-detection';
 import { eSendEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
@@ -28,11 +29,13 @@ export const ColorTags = ({ item, close }) => {
     let _note = db.notes.note(note.id).data;
     setNote({ ..._note });
     setColorNotes();
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.Notes
-    ]);
+    Navigation.queueRoutesForUpdate(
+      'Notes',
+      'Favorites',
+      'ColoredNotes',
+      'TaggedNotes',
+      'TopicNotes'
+    );
     eSendEvent(refreshNotesPage);
   };
 

apps/mobile/src/components/properties/datemeta.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { SIZE } from '../../utils/size';
 import { timeConverter } from '../../utils/time';
 import Paragraph from '../ui/typography/paragraph';

apps/mobile/src/components/properties/devmode.js

@@ -1,7 +1,7 @@
 import Clipboard from '@react-native-clipboard/clipboard';
 import React from 'react';
 import { View } from 'react-native';
-import { useSettingStore } from '../../stores/stores';
+import { useSettingStore } from '../../stores/use-setting-store';
 import { ToastEvent } from '../../services/event-manager';
 import { db } from '../../utils/database';
 import { SIZE } from '../../utils/size';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Platform, ScrollView, View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { DDS } from '../../services/device-detection';
 import { presentSheet } from '../../services/event-manager';
 import { db } from '../../utils/database';

apps/mobile/src/components/properties/items.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
-import { useSettingStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useSettingStore } from '../../stores/use-setting-store';
 import { DDS } from '../../services/device-detection';
 import { SIZE } from '../../utils/size';
 import { Button } from '../ui/button';

apps/mobile/src/components/properties/notebooks.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ScrollView, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eSendEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
 import { db } from '../../utils/database';
@@ -42,34 +42,33 @@ export default function Notebooks({ note, close }) {
   }
 
   const navigateNotebook = id => {
-    let routeName = 'Notebook';
-    let item = db.notebooks.notebook(id).data;
+    let item = db.notebooks.notebook(id)?.data;
+    if (!item) return;
     let params = {
       menu: false,
       notebook: item,
       title: item.title
     };
-    let headerState = {
-      heading: item.title,
+    let currentScreen = {
+      name: 'Notebook',
+      title: item.title,
       id: item.id,
       type: item.type
     };
-    eSendEvent(eOnNewTopicAdded, params);
-    Navigation.navigate(routeName, params, headerState);
+    Navigation.navigate(currentScreen, params);
   };
 
   const navigateTopic = (id, notebookId) => {
-    let routeName = 'NotesPage';
-    let item = db.notebooks.notebook(notebookId).topics.topic(id)._topic;
-
+    let item = db.notebooks.notebook(notebookId)?.topics?.topic(id)?._topic;
+    if (!item) return;
     let params = { ...item, menu: false };
-    let headerState = {
-      heading: item.title,
+    let currentScreen = {
+      name: 'NotesPage',
+      title: item.title,
       id: item.id,
       type: item.type
     };
-    eSendEvent(refreshNotesPage, params);
-    Navigation.navigate(routeName, params, headerState);
+    Navigation.navigate(currentScreen, params);
   };
 
   return !note.notebooks || note.notebooks.length === 0 ? null : (

apps/mobile/src/components/properties/synced.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
-import { useUserStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useUserStore } from '../../stores/use-user-store';
 import { openLinkInBrowser } from '../../utils/functions';
 import { SIZE } from '../../utils/size';
 import { sleep } from '../../utils/time';

apps/mobile/src/components/properties/tags.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eSendEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
 import { db } from '../../utils/database';
@@ -64,13 +64,15 @@ const TagItem = ({ tag, close }) => {
       type: 'tag',
       get: 'tagged'
     };
-
-    eSendEvent(refreshNotesPage, params);
-    Navigation.navigate('NotesPage', params, {
-      heading: '#' + _tag.title,
-      id: _tag.id,
-      type: _tag.type
-    });
+    Navigation.navigate(
+      {
+        name: 'NotesPage',
+        title: '#' + _tag.title,
+        id: _tag.id,
+        type: _tag.type
+      },
+      params
+    );
     await sleep(300);
     close();
   };

apps/mobile/src/components/properties/topics.js

@@ -1,24 +1,20 @@
 import React from 'react';
 import { View } from 'react-native';
-import { eSendEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
-import { refreshNotesPage } from '../../utils/events';
 import { SIZE } from '../../utils/size';
 import { Button } from '../ui/button';
 
 export const Topics = ({ item, close }) => {
   const open = topic => {
     close();
-
-    let routeName = 'NotesPage';
     let params = { ...topic, menu: false, get: 'topics' };
-    let headerState = {
-      heading: topic.title,
+    let currentScreen = {
+      name: 'NotesPage',
+      title: topic.title,
       id: topic.id,
       type: topic.type
     };
-    eSendEvent(refreshNotesPage, params);
-    Navigation.navigate(routeName, params, headerState);
+    Navigation.navigate(currentScreen, params);
   };
 
   const renderItem = topic => (

apps/mobile/src/components/selectionheader/index.js

@@ -1,8 +1,8 @@
 import React, { useEffect } from 'react';
 import { BackHandler, Platform, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useThemeStore } from '../../stores/theme';
-import { useSelectionStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useSelectionStore } from '../../stores/use-selection-store';
 import { eSendEvent, ToastEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
 import { db } from '../../utils/database';
@@ -15,19 +15,24 @@ import { sleep } from '../../utils/time';
 import { presentDialog } from '../dialog/functions';
 import { IconButton } from '../ui/icon-button';
 import Heading from '../ui/typography/heading';
+import useNavigationStore from '../../stores/use-navigation-store';
 
-export const SelectionHeader = React.memo(({ screen, type, extras }) => {
+export const SelectionHeader = React.memo(() => {
   const colors = useThemeStore(state => state.colors);
-
   const selectionMode = useSelectionStore(state => state.selectionMode);
   const selectedItemsList = useSelectionStore(state => state.selectedItemsList);
   const setSelectionMode = useSelectionStore(state => state.setSelectionMode);
   const clearSelection = useSelectionStore(state => state.clearSelection);
-
+  const currentScreen = useNavigationStore(state => state.currentScreen);
+  const screen = currentScreen.name;
   const insets = useSafeAreaInsets();
 
   useEffect(() => {
-    tabBarRef.current?.setScrollEnabled(!selectionMode);
+    if (selectionMode) {
+      tabBarRef.current?.lock();
+    } else {
+      tabBarRef.current?.unlock();
+    }
   }, [selectionMode]);
 
   const addToFavorite = async () => {
@@ -35,11 +40,13 @@ export const SelectionHeader = React.memo(({ screen, type, extras }) => {
       selectedItemsList.forEach(item => {
         db.notes.note(item.id).favorite();
       });
-      Navigation.setRoutesToUpdate([
-        Navigation.routeNames.Notes,
-        Navigation.routeNames.NotesPage,
-        Navigation.routeNames.Favorites
-      ]);
+      Navigation.queueRoutesForUpdate(
+        'Notes',
+        'Favorites',
+        'ColoredNotes',
+        'TaggedNotes',
+        'TopicNotes'
+      );
       clearSelection();
     }
   };
@@ -51,14 +58,17 @@ export const SelectionHeader = React.memo(({ screen, type, extras }) => {
         noteIds.push(item.id);
       });
       await db.trash.restore(...noteIds);
-      Navigation.setRoutesToUpdate([
-        Navigation.routeNames.Tags,
-        Navigation.routeNames.Notes,
-        Navigation.routeNames.Notebooks,
-        Navigation.routeNames.NotesPage,
-        Navigation.routeNames.Favorites,
-        Navigation.routeNames.Trash
-      ]);
+      Navigation.queueRoutesForUpdate(
+        'Notes',
+        'Favorites',
+        'ColoredNotes',
+        'TaggedNotes',
+        'TopicNotes',
+        'Trash',
+        'Notebooks',
+        'Tags'
+      );
+
       clearSelection();
       ToastEvent.show({
         heading: 'Restore successful',
@@ -82,14 +92,16 @@ export const SelectionHeader = React.memo(({ screen, type, extras }) => {
             noteIds.push(item.id);
           });
           await db.trash.delete(...noteIds);
-          Navigation.setRoutesToUpdate([
-            Navigation.routeNames.Tags,
-            Navigation.routeNames.Notes,
-            Navigation.routeNames.Notebooks,
-            Navigation.routeNames.NotesPage,
-            Navigation.routeNames.Favorites,
-            Navigation.routeNames.Trash
-          ]);
+          Navigation.queueRoutesForUpdate(
+            'Notes',
+            'Favorites',
+            'ColoredNotes',
+            'TaggedNotes',
+            'TopicNotes',
+            'Trash',
+            'Notebooks',
+            'Tags'
+          );
           clearSelection();
         }
       },
@@ -111,7 +123,7 @@ export const SelectionHeader = React.memo(({ screen, type, extras }) => {
     }
   }, [selectionMode]);
 
-  return !selectionMode || Navigation.getCurrentScreen() !== screen ? null : (
+  return !selectionMode ? null : (
     <View
       style={{
         width: '100%',
@@ -205,23 +217,27 @@ export const SelectionHeader = React.memo(({ screen, type, extras }) => {
           />
         )}
 
-        {type === 'topic' ? (
+        {screen === 'TopicNotes' ? (
           <IconButton
             onPress={async () => {
               if (selectedItemsList.length > 0) {
+                //TODO
+                let extras = {};
                 await db.notebooks
                   .notebook(extras.notebook)
                   .topics.topic(extras.topic)
                   .delete(...selectedItemsList.map(item => item.id));
 
                 eSendEvent(refreshNotesPage);
-                Navigation.setRoutesToUpdate([
-                  Navigation.routeNames.NotesPage,
-                  Navigation.routeNames.Favorites,
-                  Navigation.routeNames.Notes,
-                  Navigation.routeNames.Notebook,
-                  Navigation.routeNames.Notebooks
-                ]);
+                Navigation.queueRoutesForUpdate(
+                  'Notes',
+                  'Favorites',
+                  'ColoredNotes',
+                  'TaggedNotes',
+                  'TopicNotes',
+                  'Notebooks',
+                  'Notebook'
+                );
                 clearSelection();
               }
             }}

apps/mobile/src/components/sheetprovider/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { ActivityIndicator, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
 import { editing } from '../../utils';
 import { eCloseProgressDialog, eOpenProgressDialog } from '../../utils/events';

apps/mobile/src/components/sheets/addnotebook/index.js

@@ -2,7 +2,7 @@ import React, { createRef } from 'react';
 import { Keyboard, StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { notesnook } from '../../../../e2e/test.ids';
-import { useMenuStore } from '../../../stores/stores';
+import { useMenuStore } from '../../../stores/use-menu-store';
 import { DDS } from '../../../services/device-detection';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
@@ -198,11 +198,15 @@ export class AddNotebookSheet extends React.Component {
       });
     }
     useMenuStore.getState().setMenuPins();
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.Notebooks,
-      Navigation.routeNames.Notebook,
-      Navigation.routeNames.NotesPage
-    ]);
+    Navigation.queueRoutesForUpdate(
+      'Notes',
+      'ColoredNotes',
+      'TaggedNotes',
+      'TopicNotes',
+      'Notebooks',
+      'Notebook'
+    );
+
     this.setState({
       loading: false
     });

apps/mobile/src/components/sheets/addto/index.js

@@ -5,8 +5,9 @@ import { notesnook } from '../../../../e2e/test.ids';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
 import SearchService from '../../../services/search';
-import { useNotebookStore, useSelectionStore } from '../../../stores/stores';
-import { useThemeStore } from '../../../stores/theme';
+import { useSelectionStore } from '../../../stores/use-selection-store';
+import { useNotebookStore } from '../../../stores/use-notebook-store';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { getTotalNotes } from '../../../utils';
 import { db } from '../../../utils/database';
 import { eOpenMoveNoteDialog } from '../../../utils/events';
@@ -50,13 +51,15 @@ const AddToNotebookSheet = () => {
     setVisible(false);
     newNotebookTitle = null;
     setNote(null);
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.Notes,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Notebook,
-      Navigation.routeNames.Notebooks
-    ]);
+    Navigation.queueRoutesForUpdate(
+      'Notes',
+      'Favorites',
+      'ColoredNotes',
+      'TaggedNotes',
+      'TopicNotes',
+      'Notebooks',
+      'Notebook'
+    );
   };
 
   return !visible ? null : (
@@ -135,11 +138,14 @@ const MoveNoteComponent = ({ note }) => {
       );
     }
 
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.Notes
-    ]);
+    Navigation.queueRoutesForUpdate(
+      'Notes',
+      'Favorites',
+      'ColoredNotes',
+      'TaggedNotes',
+      'TopicNotes'
+    );
+
     setNotebooks();
     updateNoteExists();
     SearchService.updateAndSearch();

apps/mobile/src/components/sheets/exportnotes/index.js

@@ -4,7 +4,7 @@ import FileViewer from 'react-native-file-viewer';
 import Share from 'react-native-share';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../../e2e/test.ids';
-import { useThemeStore } from '../../../stores/theme';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { ToastEvent } from '../../../services/event-manager';
 import Exporter from '../../../services/exporter';
 import { getElevation } from '../../../utils';

apps/mobile/src/components/sheets/github/issue.js

@@ -1,8 +1,8 @@
 import Clipboard from '@react-native-clipboard/clipboard';
 import React, { useRef, useState } from 'react';
 import { Linking, Platform, Text, TextInput, View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
-import { useUserStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useUserStore } from '../../../stores/use-user-store';
 import { eSendEvent, ToastEvent } from '../../../services/event-manager';
 import PremiumService from '../../../services/premium';
 import { APP_VERSION } from '../../../../version';

apps/mobile/src/components/sheets/managetags/index.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../../stores/theme';
-import { useTagStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useTagStore } from '../../../stores/use-tag-store';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
 import { db } from '../../../utils/database';
@@ -113,11 +113,15 @@ const ManageTagsSheet = () => {
       });
     }
 
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.Notes
-    ]);
+    Navigation.queueRoutesForUpdate(
+      'Notes',
+      'Favorites',
+      'ColoredNotes',
+      'TaggedNotes',
+      'TopicNotes',
+      'Notebooks',
+      'Notebook'
+    );
   };
 
   return !visible ? null : (
@@ -230,11 +234,13 @@ const TagItem = ({ tag, note, setNote }) => {
       setNote(db.notes.note(note.id).data);
     } catch (e) {}
     setTimeout(() => {
-      Navigation.setRoutesToUpdate([
-        Navigation.routeNames.NotesPage,
-        Navigation.routeNames.Favorites,
-        Navigation.routeNames.Notes
-      ]);
+      Navigation.queueRoutesForUpdate(
+        'Notes',
+        'Favorites',
+        'ColoredNotes',
+        'TaggedNotes',
+        'TopicNotes'
+      );
     }, 1);
   };
 

apps/mobile/src/components/sheets/movenotes/movenote.tsx

@@ -2,7 +2,7 @@ import React, { RefObject, useState } from 'react';
 import { Platform, View } from 'react-native';
 import ActionSheet from 'react-native-actions-sheet';
 import { FlatList } from 'react-native-gesture-handler';
-import { useThemeStore } from '../../../stores/theme';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { eSendEvent, presentSheet, ToastEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
 import { db } from '../../../utils/database';
@@ -82,13 +82,16 @@ export const MoveNotes = ({
     }
     await db.notebooks?.notebook(currentNotebook.id).topics.add(value);
     setCurrentNotebook(db.notebooks?.notebook(currentNotebook.id).data);
-    Navigation.setRoutesToUpdate([
-      Navigation.routeNames.NotesPage,
-      Navigation.routeNames.Favorites,
-      Navigation.routeNames.Notes,
-      Navigation.routeNames.Notebooks,
-      Navigation.routeNames.Notebook
-    ]);
+
+    Navigation.queueRoutesForUpdate(
+      'Notes',
+      'Favorites',
+      'ColoredNotes',
+      'TaggedNotes',
+      'TopicNotes',
+      'Notebook',
+      'Notebooks'
+    );
     return true;
   };
 
@@ -269,13 +272,15 @@ export const MoveNotes = ({
               },
               ...selectedNoteIds
             );
-            Navigation.setRoutesToUpdate([
-              Navigation.routeNames.NotesPage,
-              Navigation.routeNames.Favorites,
-              Navigation.routeNames.Notes,
-              Navigation.routeNames.Notebooks,
-              Navigation.routeNames.Notebook
-            ]);
+            Navigation.queueRoutesForUpdate(
+              'Notes',
+              'Favorites',
+              'ColoredNotes',
+              'TaggedNotes',
+              'TopicNotes',
+              'Notebook',
+              'Notebooks'
+            );
             SearchService.updateAndSearch();
             eSendEvent(eCloseProgressDialog);
           }}

apps/mobile/src/components/sheets/newfeature/index.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { APP_VERSION } from '../../../../version';
 import { eSendEvent, presentSheet } from '../../../services/event-manager';
 import SettingsService from '../../../services/settings';
-import { useThemeStore } from '../../../stores/theme';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { eCloseProgressDialog } from '../../../utils/events';
 import { SIZE } from '../../../utils/size';
 import { Button } from '../../ui/button';

apps/mobile/src/components/sheets/progress/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import * as ProgressBar from 'react-native-progress';
 import { presentSheet } from '../../../services/event-manager';
-import { useThemeStore } from '../../../stores/theme';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import useSyncProgress from '../../../utils/hooks/use-sync-progress';
 import { SIZE } from '../../../utils/size';
 import Seperator from '../../ui/seperator';

apps/mobile/src/components/sheets/publishnote/index.js

@@ -2,8 +2,8 @@ import Clipboard from '@react-native-clipboard/clipboard';
 import React, { useEffect, useRef, useState } from 'react';
 import { ActivityIndicator, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../../stores/theme';
-import { useAttachmentStore } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { useAttachmentStore } from '../../../stores/use-attachment-store';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
 import { db } from '../../../utils/database';
@@ -76,11 +76,13 @@ const PublishNoteSheet = () => {
           password: isLocked && passwordValue
         });
         setNote(db.notes.note(note.id)?.data);
-        Navigation.setRoutesToUpdate([
-          Navigation.routeNames.Notes,
-          Navigation.routeNames.NotesPage,
-          Navigation.routeNames.Favorites
-        ]);
+        Navigation.queueRoutesForUpdate(
+          'Notes',
+          'Favorites',
+          'ColoredNotes',
+          'TaggedNotes',
+          'TopicNotes'
+        );
       }
     } catch (e) {
       ToastEvent.show({
@@ -101,11 +103,13 @@ const PublishNoteSheet = () => {
       if (note?.id) {
         await db.monographs.unpublish(note.id);
         setNote(db.notes.note(note.id)?.data);
-        Navigation.setRoutesToUpdate([
-          Navigation.routeNames.Notes,
-          Navigation.routeNames.NotesPage,
-          Navigation.routeNames.Favorites
-        ]);
+        Navigation.queueRoutesForUpdate(
+          'Notes',
+          'Favorites',
+          'ColoredNotes',
+          'TaggedNotes',
+          'TopicNotes'
+        );
       }
     } catch (e) {
       ToastEvent.show({

apps/mobile/src/components/sheets/restoredata/index.js

@@ -3,8 +3,8 @@ import { ActivityIndicator, Platform, View } from 'react-native';
 import DocumentPicker from 'react-native-document-picker';
 import { FlatList } from 'react-native-gesture-handler';
 import * as ScopedStorage from 'react-native-scoped-storage';
-import { useThemeStore } from '../../../stores/theme';
-import { initialize } from '../../../stores/stores';
+import { useThemeStore } from '../../../stores/use-theme-store';
+import { initialize } from '../../../stores';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../../services/event-manager';
 import { db } from '../../../utils/database';
 import { MMKV } from '../../../utils/database/mmkv';

apps/mobile/src/components/sheets/sort/index.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../../stores/theme';
 import { eSendEvent } from '../../../services/event-manager';
 import Navigation from '../../../services/navigation';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { GROUP, SORT } from '../../../utils/constants';
 import { db } from '../../../utils/database';
 import { refreshNotesPage } from '../../../utils/events';
@@ -11,7 +11,6 @@ import { SIZE } from '../../../utils/size';
 import { Button } from '../../ui/button';
 import Seperator from '../../ui/seperator';
 import Heading from '../../ui/typography/heading';
-import Animated, { Layout } from 'react-native-reanimated';
 
 const Sort = ({ type, screen }) => {
   const colors = useThemeStore(state => state.colors);
@@ -23,7 +22,7 @@ const Sort = ({ type, screen }) => {
     layoutmanager.withSpringAnimation(600);
     setGroupOptions(_groupOptions);
     setTimeout(() => {
-      Navigation.setRoutesToUpdate([screen]);
+      Navigation.queueRoutesForUpdate(screen);
       eSendEvent('groupOptionsUpdate');
       eSendEvent(refreshNotesPage);
     }, 1);

apps/mobile/src/components/sheets/update/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Linking, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
-import { useThemeStore } from '../../../stores/theme';
+import { useThemeStore } from '../../../stores/use-theme-store';
 import { STORE_LINK } from '../../../utils/constants';
 import { SIZE } from '../../../utils/size';
 import { Button } from '../../ui/button';

apps/mobile/src/components/sidemenu/colorsection.js

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
-import { useThemeStore } from '../../stores/theme';
-import { useMenuStore, useNoteStore } from '../../stores/stores';
-import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
+import useNavigationStore from '../../stores/use-navigation-store';
+import { useMenuStore } from '../../stores/use-menu-store';
+import { useNoteStore } from '../../stores/use-notes-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { COLORS_NOTE } from '../../utils/color-scheme';
 import { db } from '../../utils/database';
-import { refreshNotesPage } from '../../utils/events';
 import { normalize, SIZE } from '../../utils/size';
 import { presentDialog } from '../dialog/functions';
 import { PressableButton } from '../ui/pressable';
@@ -40,10 +40,11 @@ const ColorItem = React.memo(
     const [headerTextState, setHeaderTextState] = useState(null);
     alias = db.colors.alias(item.id) || '';
 
-    const onHeaderStateChange = event => {
+    const onHeaderStateChange = state => {
       setTimeout(() => {
-        if (event.id === item.id) {
-          setHeaderTextState(event);
+        let id = state.currentScreen?.id;
+        if (id === item.id) {
+          setHeaderTextState({ id: state.currentScreen.id });
         } else {
           if (headerTextState !== null) {
             setHeaderTextState(null);
@@ -53,9 +54,9 @@ const ColorItem = React.memo(
     };
 
     useEffect(() => {
-      eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
+      let unsub = useNavigationStore.subscribe(onHeaderStateChange);
       return () => {
-        eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
+        unsub();
       };
     }, [headerTextState]);
 
@@ -66,14 +67,19 @@ const ColorItem = React.memo(
         menu: true,
         get: 'colored'
       };
+      Navigation.navigate(
+        {
+          name: 'NotesPage',
+          title: alias.slice(0, 1).toUpperCase() + alias.slice(1),
+          id: item.id,
+          type: 'color'
+        },
+        params
+      );
 
-      eSendEvent(refreshNotesPage, params);
-      Navigation.navigate('NotesPage', params, {
-        heading: alias.slice(0, 1).toUpperCase() + alias.slice(1),
-        id: item.id,
-        type: 'color'
+      setImmediate(() => {
+        Navigation.closeDrawer();
       });
-      Navigation.closeDrawer();
     };
 
     const onLongPress = () => {

apps/mobile/src/components/sidemenu/index.js

@@ -5,8 +5,10 @@ import { notesnook } from '../../../e2e/test.ids';
 import Settings from '../../screens/settings';
 import { DDS } from '../../services/device-detection';
 import { eSendEvent } from '../../services/event-manager';
-import { useSettingStore, useUserStore } from '../../stores/stores';
-import { useThemeStore } from '../../stores/theme';
+import { useUserStore } from '../../stores/use-user-store';
+import { useSettingStore } from '../../stores/use-setting-store';
+import { useNoteStore } from '../../stores/use-notes-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import umami from '../../utils/analytics';
 import { toggleDarkMode } from '../../utils/color-scheme/utils';
 import { MenuItemsList, SUBSCRIPTION_STATUS } from '../../utils/constants';
@@ -22,7 +24,7 @@ export const SideMenu = React.memo(
     const deviceMode = useSettingStore(state => state.deviceMode);
     const insets = useSafeAreaInsets();
     const subscriptionType = useUserStore(state => state.user?.subscription?.type);
-    console.log(subscriptionType);
+    const loading = useNoteStore(state => state.loading);
     const noTextMode = false;
 
     const BottomItemsList = [
@@ -63,7 +65,7 @@ export const SideMenu = React.memo(
       []
     );
 
-    return (
+    return !loading ? (
       <View
         style={{
           height: '100%',
@@ -129,7 +131,7 @@ export const SideMenu = React.memo(
           </View>
         </View>
       </View>
-    );
+    ) : null;
   },
   () => true
 );

apps/mobile/src/components/sidemenu/menuitem.js

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import ToggleSwitch from 'toggle-switch-react-native';
-import { useThemeStore } from '../../stores/theme';
-import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
+import useNavigationStore from '../../stores/use-navigation-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { normalize, SIZE } from '../../utils/size';
 import { Button } from '../ui/button';
 import { PressableButton } from '../ui/pressable';
@@ -14,34 +14,30 @@ import Paragraph from '../ui/typography/paragraph';
 export const MenuItem = React.memo(
   ({ item, index, testID, rightBtn }) => {
     const colors = useThemeStore(state => state.colors);
-    const [headerTextState, setHeaderTextState] = useState(null);
-    let isFocused = headerTextState?.id === item.name.toLowerCase() + '_navigation';
+    const [headerTextState, setHeaderTextState] = useState(
+      useNavigationStore.getState().currentScreen
+    );
+    const screenId = item.name.toLowerCase() + '_navigation';
+    let isFocused = headerTextState?.id === screenId;
 
-    const _onPress = event => {
+    const _onPress = () => {
       if (item.func) {
-        console.log('item.func called');
         item.func();
       } else {
-        Navigation.navigate(
-          item.name,
-          {
-            menu: true
-          },
-          {
-            heading: item.name,
-            id: item.name.toLowerCase() + '_navigation'
-          }
-        );
+        Navigation.navigate({ name: item.name }, { menu: true });
       }
       if (item.close) {
-        Navigation.closeDrawer();
+        setImmediate(() => {
+          Navigation.closeDrawer();
+        });
       }
     };
 
-    const onHeaderStateChange = event => {
+    const onHeaderStateChange = state => {
       setTimeout(() => {
-        if (event.id === item.name.toLowerCase() + '_navigation') {
-          setHeaderTextState(event);
+        let id = state.currentScreen?.id;
+        if (id === screenId) {
+          setHeaderTextState({ id: state.currentScreen.id });
         } else {
           if (headerTextState !== null) {
             setHeaderTextState(null);
@@ -51,9 +47,9 @@ export const MenuItem = React.memo(
     };
 
     useEffect(() => {
-      eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
+      let unsub = useNavigationStore.subscribe(onHeaderStateChange);
       return () => {
-        eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
+        unsub();
       };
     }, [headerTextState]);
 

apps/mobile/src/components/sidemenu/pinnedsection.js

@@ -1,21 +1,26 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FlatList, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
-import { useMenuStore, useNoteStore } from '../../stores/stores';
-import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/event-manager';
+import { eSendEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
+import useNavigationStore from '../../stores/use-navigation-store';
+import { useMenuStore } from '../../stores/use-menu-store';
+import { useNoteStore } from '../../stores/use-notes-store';
+import { useThemeStore } from '../../stores/use-theme-store';
 import { db } from '../../utils/database';
 import { eOnNewTopicAdded, refreshNotesPage } from '../../utils/events';
 import { normalize, SIZE } from '../../utils/size';
+import { Properties } from '../properties';
 import { Button } from '../ui/button';
 import { Notice } from '../ui/notice';
 import { PressableButton } from '../ui/pressable';
-import { Properties } from '../properties';
 import Seperator from '../ui/seperator';
 import SheetWrapper from '../ui/sheet';
 import Heading from '../ui/typography/heading';
 import Paragraph from '../ui/typography/paragraph';
+import { TaggedNotes } from '../../screens/notes/tagged';
+import { TopicNotes } from '../../screens/notes/topic-notes';
+import Notebook from '../../screens/notebook';
 
 export const TagsSection = React.memo(
   () => {
@@ -30,42 +35,16 @@ export const TagsSection = React.memo(
     }, [loading]);
 
     const onPress = item => {
-      let params = {};
       if (item.type === 'notebook') {
-        params = {
-          notebook: item,
-          title: item.title,
-          menu: true
-        };
-        eSendEvent(eOnNewTopicAdded, params);
-        Navigation.navigate('Notebook', params, {
-          heading: item.title,
-          id: item.id,
-          type: item.type
-        });
+        Notebook.navigate(item);
       } else if (item.type === 'tag') {
-        params = {
-          ...item,
-          type: 'tag',
-          menu: true,
-          get: 'tagged'
-        };
-        eSendEvent(refreshNotesPage, params);
-        Navigation.navigate('NotesPage', params, {
-          heading: '#' + db.tags.alias(item.id),
-          id: item.id,
-          type: item.type
-        });
+        TaggedNotes.navigate(item);
       } else {
-        params = { ...item, menu: true, get: 'topics' };
-        eSendEvent(refreshNotesPage, params);
-        Navigation.navigate('NotesPage', params, {
-          heading: item.title,
-          id: item.id,
-          type: item.type
-        });
+        TopicNotes.navigate(item);
       }
-      Navigation.closeDrawer();
+      setImmediate(() => {
+        Navigation.closeDrawer();
+      });
     };
     const renderItem = ({ item, index }) => {
       let alias = item ? (item.type === 'tag' ? db.tags.alias(item.title) : item.title) : null;
@@ -112,10 +91,13 @@ export const PinItem = React.memo(
     const color = headerTextState?.id === item.id ? colors.accent : colors.pri;
     const fwdRef = useRef();
 
-    const onHeaderStateChange = event => {
+    const onHeaderStateChange = state => {
       setTimeout(() => {
-        if (event.id === item.id) {
-          setHeaderTextState(event);
+        let id = state.currentScreen?.id;
+        if (id === item.id) {
+          setHeaderTextState({
+            id: state.currentScreen.id
+          });
         } else {
           if (headerTextState !== null) {
             setHeaderTextState(null);
@@ -125,9 +107,9 @@ export const PinItem = React.memo(
     };
 
     useEffect(() => {
-      eSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
+      let unsub = useNavigationStore.subscribe(onHeaderStateChange);
       return () => {
-        eUnSubscribeEvent('onHeaderStateChange', onHeaderStateChange);
+        unsub();
       };
     }, [headerTextState]);
 

apps/mobile/src/components/sidemenu/userstatus.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { ActivityIndicator, Platform, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useThemeStore } from '../../stores/theme';
-import { useUserStore } from '../../stores/stores';
+import { useThemeStore } from '../../stores/use-theme-store';
+import { useUserStore } from '../../stores/use-user-store';
 import { eSendEvent } from '../../services/event-manager';
 import Sync from '../../services/sync';
 import { eOpenLoginDialog } from '../../utils/events';

apps/mobile/src/components/tabs/index.js

@@ -22,7 +22,6 @@ export default class Tabs extends Component {
     this.lastOffset = this.props.offsets.a;
     this.locked = false;
   }
-
   renderItem = ({ item, index }) => this.props.items[index];
 
   onMoveShouldSetResponder = event => {

apps/mobile/src/components/tabs/new.tsx

@@ -0,0 +1,244 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { ViewProps } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming
+} from 'react-native-reanimated';
+
+interface TabProps extends ViewProps {
+  dimensions: { width: number; height: number };
+  widths: { a: number; b: number; c: number };
+  onChangeTab: (data: { i: number; from: number }) => void;
+  onScroll: (offset: number) => void;
+  enabled: boolean;
+  onDrawerStateChange: (state: boolean) => void;
+}
+
+export interface TabsRef {
+  goToPage: (page: number) => void;
+  goToIndex: (index: number) => 0 | undefined;
+  unlock: () => boolean;
+  lock: () => boolean;
+  openDrawer: () => void;
+  closeDrawer: () => void;
+  page: number;
+  setScrollEnabled: () => true;
+}
+
+export const NewTabs = forwardRef<TabsRef, TabProps>(
+  (
+    { children, dimensions, widths, onChangeTab, onScroll, enabled, onDrawerStateChange }: TabProps,
+    ref
+  ) => {
+    const translateX = useSharedValue(widths ? widths.a : 0);
+    const startX = useSharedValue(0);
+    const currentTab = useSharedValue(1);
+    const previousTab = useSharedValue(1);
+    const isDrawerOpen = useSharedValue(false);
+    const gestureStartValue = useSharedValue({
+      x: 0,
+      y: 0
+    });
+    const locked = useSharedValue(false);
+    const forcedLock = useSharedValue(false);
+    const containerWidth = widths ? widths.a + widths.b + widths.c : dimensions.width;
+    const drawerPosition = 0;
+    const homePosition = widths.a;
+    const editorPosition = widths.a + widths.b;
+
+    useImperativeHandle(
+      ref,
+      (): TabsRef => ({
+        goToPage: (page: number) => {
+          page = page + 1;
+          if (page === 1) {
+            onDrawerStateChange(false);
+            console.log('coming here');
+            translateX.value = withTiming(homePosition);
+            currentTab.value = 1;
+          } else if (page === 2) {
+            onDrawerStateChange(false);
+            translateX.value = withTiming(editorPosition);
+            currentTab.value = 2;
+          }
+        },
+        goToIndex: (index: number) => {
+          console.log('index', index);
+          if (index === 0) {
+            onDrawerStateChange(true);
+            return (translateX.value = withSpring(0));
+          }
+          if (index === 1) {
+            translateX.value = withTiming(homePosition);
+            currentTab.value = 1;
+          } else if (index === 2) {
+            translateX.value = withTiming(editorPosition);
+            currentTab.value = 2;
+          }
+        },
+        unlock: () => {
+          forcedLock.value = false;
+          console.log('forced lock status', forcedLock.value);
+          return false;
+        },
+        lock: () => {
+          forcedLock.value = true;
+          console.log('forced lock status', forcedLock.value);
+          return true;
+        },
+        openDrawer: () => {
+          translateX.value = withSpring(drawerPosition, {
+            mass: 0.5
+          });
+          onDrawerStateChange(true);
+        },
+        closeDrawer: () => {
+          translateX.value = withTiming(homePosition);
+          onDrawerStateChange(false);
+        },
+        page: currentTab.value,
+        setScrollEnabled: () => true
+      }),
+      []
+    );
+
+    useAnimatedReaction(
+      () => currentTab.value,
+      result => {
+        if (onChangeTab) {
+          runOnJS(onChangeTab)({ i: result, from: previousTab.value });
+        }
+      },
+      []
+    );
+
+    useAnimatedReaction(
+      () => translateX.value,
+      value => {
+        runOnJS(onScroll)(value);
+      },
+      []
+    );
+
+    const gesture = Gesture.Pan()
+      .maxPointers(1)
+      .enabled(enabled)
+      .activeOffsetX([-20, 20])
+      .failOffsetY([-10, 10])
+      .onBegin(event => {
+        locked.value = false;
+        gestureStartValue.value = {
+          x: event.absoluteX,
+          y: event.absoluteY
+        };
+      })
+      .onStart(event => {
+        let diffX = gestureStartValue.value.x - event.absoluteX;
+        let diffY = gestureStartValue.value.y - event.absoluteY;
+
+        let vx = event.velocityX;
+        let vy = event.velocityY;
+
+        if (vx < 0) vx = vx * -1;
+        if (vy < 0) vy = vy * -1;
+
+        console.log(event.velocityX, event.velocityY, diffX, diffY);
+        console.log('diff: ', vx / vy, 'lock: ', vx / vy < 5, vy > vx);
+        // if vy is greater than vx, user is swiping vertically. lock swiping.
+        if (vy > vx) locked.value = true;
+        // if dividend of vx/vy is less than 4, user is swiping diagonally. lock swiping
+        if (vx / vy < 4) locked.value = true;
+        startX.value = translateX.value;
+      })
+      .onChange(event => {
+        if (locked.value || forcedLock.value) return;
+        let value = translateX.value + event.changeX * -1;
+        if (value < 0 || currentTab.value === 2 || value > editorPosition) return;
+        translateX.value = value;
+      })
+      .onEnd(event => {
+        if (currentTab.value === 2) return;
+        let velocityX = event.velocityX < 0 ? event.velocityX * -1 : event.velocityX;
+        let isSwipeLeft = startX.value > translateX.value;
+        let finalValue = isSwipeLeft
+          ? translateX.value - velocityX / 40.0
+          : translateX.value + velocityX / 40.0;
+
+        const animationConfig = {
+          velocity: event.velocityX,
+          overshootClamping: true,
+          stiffness: 200,
+          mass: 0.1
+        };
+
+        if (finalValue < homePosition) {
+          if (isSwipeLeft && finalValue < homePosition - 150) {
+            translateX.value = withSpring(0, animationConfig);
+            isDrawerOpen.value = true;
+            currentTab.value = 1;
+            runOnJS(onDrawerStateChange)(true);
+            return;
+          } else if (!isSwipeLeft && finalValue > 100) {
+            translateX.value = withSpring(homePosition, animationConfig);
+            isDrawerOpen.value = false;
+            currentTab.value = 1;
+            runOnJS(onDrawerStateChange)(false);
+            return;
+          } else if (!isSwipeLeft && finalValue < 150) {
+            translateX.value = withSpring(0, animationConfig);
+            isDrawerOpen.value = true;
+            currentTab.value = 1;
+            return;
+          }
+        }
+
+        if (finalValue > homePosition && currentTab.value === 1) {
+          const sizeOfEditorInView = finalValue - homePosition;
+          if (!isSwipeLeft && sizeOfEditorInView > 150) {
+            translateX.value = withSpring(editorPosition, animationConfig);
+            currentTab.value = 2;
+            isDrawerOpen.value = false;
+            return;
+          }
+        }
+
+        runOnJS(onDrawerStateChange)(false);
+        translateX.value = withSpring(homePosition, animationConfig);
+        currentTab.value = 1;
+        startX.value = 0;
+      });
+
+    const animatedStyles = useAnimatedStyle(() => {
+      return {
+        transform: [
+          {
+            translateX: translateX.value * -1
+          }
+        ]
+      };
+    }, []);
+    return (
+      <GestureDetector gesture={gesture}>
+        <Animated.View
+          removeClippedSubviews={false}
+          collapsable={false}
+          style={[
+            {
+              flex: 1,
+              width: containerWidth,
+              flexDirection: 'row'
+            },
+            animatedStyles
+          ]}
+        >
+          {children}
+        </Animated.View>
+      </GestureDetector>
+    );
+  }
+);

apps/mobile/src/components/tip/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Image, TextStyle, View, ViewStyle } from 'react-native';
 import { eSendEvent, presentSheet } from '../../services/event-manager';
 import { TTip } from '../../services/tip-manager';
-import { ThemeStore, useThemeStore } from '../../stores/theme';
+import { ThemeStore, useThemeStore } from '../../stores/use-theme-store';
 import { MMKV } from '../../utils/database/mmkv';
 import { eCloseProgressDialog } from '../../utils/events';
 import { SIZE } from '../../utils/size';