fixes and improvements in ui while on a tablet

apps/mobile/index.mobile.js

@@ -38,7 +38,7 @@ export const Initialize = () => {
   return (
     <>
       <Animatable.View
-        testID={"mobile_main_view"}
+        testID={'mobile_main_view'}
         transition="backgroundColor"
         duration={300}
         style={{

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

@@ -13,8 +13,9 @@ const DialogButtons = ({
   return (
     <View
       style={styles.container}>
+
+      <Button onPress={onPressNegative} grayed title={negativeTitle} />
       <Button onPress={onPressPositive} title={positiveTitle} />
-      <Button onPress={onPressNegative} title={negativeTitle} />
     </View>
   );
 };

apps/mobile/src/components/Dialog/DialogHeader.js

@@ -24,7 +24,7 @@ const DialogHeader = ({icon, title, paragraph}) => {
             color: colors.heading,
             fontFamily: WEIGHT.bold,
             marginLeft: 5,
-            fontSize: SIZE.md,
+            fontSize: SIZE.lg,
           }}>
           {title}
         </Text>

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

@@ -282,8 +282,7 @@ export class DialogManager extends Component {
           containerStyle={{
             backgroundColor: colors.bg,
             width: DDS.isTab ? 500 : '100%',
-            alignSelf: DDS.isTab ? 'flex-end' : 'center',
+            alignSelf:'center',
-            marginRight: DDS.isTab ? 12 : null,
             borderRadius: 10,
             marginBottom: DDS.isTab ? 50 : 0,
           }}

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

@@ -22,7 +22,7 @@ export const Loading = ({
             style={[
               {color: colors.icon},
               styles.activityText,
-              {fontSize: SIZE.xs},
+              {fontSize: SIZE.xs,fontFamily:WEIGHT.regular},
             ]}>
             {doneText}
           </Text>
@@ -67,5 +67,6 @@ const styles = StyleSheet.create({
     fontFamily: WEIGHT.medium,
     color: 'white',
     fontSize: SIZE.sm,
+    
   },
 });

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

@@ -85,7 +85,6 @@ const LoginDialog = () => {
     setUserConsent(false);
     setEmail(false);
     setLoggingIn(false);
- 
   };
 
   const loginUser = async () => {
@@ -136,7 +135,6 @@ const LoginDialog = () => {
     }
   };
 
-
   const validateInfo = () => {
     if (!password || !email || !username || !passwordReEnter) {
       ToastEvent.show('All fields are required', 'error', 'local');
@@ -203,7 +201,7 @@ const LoginDialog = () => {
   return (
     <Modal
       animated={true}
-      animationType="slide"
+      animationType={DDS.isTab ? 'fade' : 'slide'}
       statusBarTranslucent={true}
       onRequestClose={close}
       visible={visible}
@@ -212,7 +210,7 @@ const LoginDialog = () => {
         style={{
           opacity: 1,
           flex: 1,
-          paddingTop: insets.top,
+          paddingTop: DDS.isTab ? 0 : insets.top,
           backgroundColor: DDS.isTab ? 'rgba(0,0,0,0.3)' : colors.bg,
           width: '100%',
           height: '100%',
@@ -233,10 +231,12 @@ const LoginDialog = () => {
         ) : null}
         <View
           style={{
-            height: '100%',
+            height: DDS.isTab ? (login ? '70%' : '80%') : '100%',
-            width: '100%',
+            width: DDS.isTab ? 500 : '100%',
             backgroundColor: colors.bg,
             justifyContent: 'center',
+            borderRadius: DDS.isTab ? 5 : 0,
+            zIndex: 10,
           }}>
           <Toast context="local" />
           {loggingIn || signingIn ? (
@@ -355,6 +355,7 @@ const LoginDialog = () => {
             )
           ) : (
             <>
+              {DDS.isTab ? null : (
                 <Icon
                   name="arrow-left"
                   size={SIZE.xxxl}
@@ -372,6 +373,8 @@ const LoginDialog = () => {
                   }}
                   color={colors.heading}
                 />
+              )}
+
               <View
                 style={{
                   justifyContent: 'center',
@@ -781,6 +784,7 @@ const LoginDialog = () => {
                     style={{
                       flexDirection: 'row',
                       width: '100%',
+                      alignItems: 'center',
                     }}>
                     <CheckBox
                       onValueChange={(value) => {
@@ -837,8 +841,8 @@ const LoginDialog = () => {
                   activeOpacity={opacity}
                   style={{
                     alignSelf: 'center',
-                    marginTop: 70,
+                    marginTop: DDS.isTab ? 35 : 70,
-                    height: 50,
+                    height: DDS.isTab ? null : 50,
                   }}>
                   <Text
                     style={{

apps/mobile/src/components/Menu/MenuListItem.js

@@ -7,13 +7,14 @@ import { ACTIONS } from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {eClearSearch} from '../../services/events';
 import NavigationService from '../../services/NavigationService';
+import {DDS, showContext} from '../../utils/utils';
 import {PressableButton} from '../PressableButton';
 
 export const MenuListItem = ({item, index, noTextMode, ignore, testID}) => {
   const [state, dispatch] = useTracked();
   const {currentScreen, colors} = state;
 
-  const _onPress = () => {
+  const _onPress = (event) => {
     if (!ignore) {
       dispatch({
         type: ACTIONS.HEADER_TEXT_STATE,
@@ -35,6 +36,10 @@ export const MenuListItem = ({item, index, noTextMode, ignore,testID}) => {
       testID={testID}
       key={item.name + index}
       onPress={_onPress}
+      onLongPress={(event) => {
+        console.log(event.nativeEvent);
+        showContext(event, item.name);
+      }}
       color={
         currentScreen === item.name.toLowerCase() ? colors.shade : 'transparent'
       }
@@ -49,7 +54,7 @@ export const MenuListItem = ({item, index, noTextMode, ignore,testID}) => {
         paddingHorizontal: noTextMode ? 0 : 8,
         justifyContent: noTextMode ? 'center' : 'space-between',
         alignItems: 'center',
-        height:50
+        height: 50,
       }}>
       <View
         style={{
@@ -64,7 +69,7 @@ export const MenuListItem = ({item, index, noTextMode, ignore,testID}) => {
           }}
           name={item.icon}
           color={colors.accent}
-          size={SIZE.md + 1}
+          size={DDS.isTab ? SIZE.md + 5 : SIZE.md + 1}
         />
         {noTextMode ? null : (
           <Text

apps/mobile/src/components/Menu/UserSection.js

@@ -7,16 +7,14 @@ import {
   View,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {opacity, pv, SIZE, WEIGHT} from '../../common/common';
+import {pv, SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {eOpenLoginDialog} from '../../services/events';
-import NavigationService from '../../services/NavigationService';
+import {db, hexToRGBA, showContext, ToastEvent} from '../../utils/utils';
-import {db, DDS, hexToRGBA, ToastEvent} from '../../utils/utils';
-import {TimeSince} from './TimeSince';
-import {sideMenuRef} from '../../utils/refs';
 import {PressableButton} from '../PressableButton';
+import {TimeSince} from './TimeSince';
 
 export const UserSection = ({noTextMode}) => {
   const [state, dispatch] = useTracked();
@@ -143,7 +141,10 @@ export const UserSection = ({noTextMode}) => {
       onPress={() => {
         eSendEvent(eOpenLoginDialog);
       }}
-      color={colors.shade}
+      onLongPress={(event) => {
+        showContext(event, 'Login');
+      }}
+      color={noTextMode ? 'transparent' : colors.shade}
       selectedColor={colors.accent}
       alpha={!colors.night ? -0.02 : 0.1}
       opacity={0.12}
@@ -151,8 +152,8 @@ export const UserSection = ({noTextMode}) => {
         paddingVertical: 12,
         marginVertical: 5,
         marginTop: pv + 5,
-        borderRadius: 5,
+        borderRadius: noTextMode ? 0 : 5,
-        width: '93%',
+        width: noTextMode ? '100%' : '93%',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: noTextMode ? 'center' : 'flex-start',
@@ -161,7 +162,7 @@ export const UserSection = ({noTextMode}) => {
       <View
         style={{
           width: 30,
-          backgroundColor: colors.accent,
+          backgroundColor: noTextMode ? 'transparent' : colors.accent,
           height: 30,
           borderRadius: 100,
           alignItems: 'center',
@@ -172,9 +173,9 @@ export const UserSection = ({noTextMode}) => {
             textAlign: 'center',
             textAlignVertical: 'center',
           }}
-          name="account-outline"
+          name={noTextMode ? 'login-variant' : 'account-outline'}
-          color="white"
+          color={noTextMode ? colors.accent : 'white'}
-          size={SIZE.md}
+          size={noTextMode ? SIZE.md + 5 : SIZE.md + 1}
         />
       </View>
       {noTextMode ? null : (

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

@@ -23,15 +23,14 @@ import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
 import NavigationService from '../../services/NavigationService';
 import {sideMenuRef} from '../../utils/refs';
-import {DDS} from '../../utils/utils';
+import {DDS, w} from '../../utils/utils';
 import {ColorSection} from './ColorSection';
 import {MenuListItem} from './MenuListItem';
 import {TagsSection} from './TagsSection';
 import {UserSection} from './UserSection';
 import {MMKV} from '../../utils/storage';
 import Seperator from '../Seperator';
-
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
-const AnimatedSafeAreaView = createAnimatableComponent(SafeAreaView);
 
 export const Menu = ({
   close = () => {},
@@ -42,6 +41,7 @@ export const Menu = ({
 }) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
+  const insets = useSafeAreaInsets();
 
   function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
     let newColors = setColorScheme(colors, accent);
@@ -104,61 +104,19 @@ export const Menu = ({
   ];
 
   return (
-    <AnimatedSafeAreaView
+    <View
-      transition="backgroundColor"
-      duration={300}
       style={{
         height: '100%',
         opacity: hide ? 0 : 1,
         width: '100%',
         backgroundColor: colors.bg,
-        borderRightWidth: noTextMode ? 1 : 0,
+        paddingTop:insets.top
-        borderRightColor: noTextMode ? colors.nav : 'transparent',
       }}>
-      <View
-        style={{
-          minHeight: 2,
-          width: '100%',
-          paddingHorizontal: noTextMode ? 0 : ph,
-          height: DDS.isTab && noTextMode ? 50 : 0,
-          marginBottom: 0,
-          alignItems: 'center',
-          flexDirection: 'row',
-          justifyContent: noTextMode ? 'center' : 'space-between',
-          marginTop:
-            Platform.OS == 'ios'
-              ? 0
-              : DDS.isTab
-              ? noTextMode
-                ? StatusBar.currentHeight
-                : 0
-              : StatusBar.currentHeight,
-        }}>
-        {DDS.isTab && noTextMode ? (
-          <TouchableOpacity
-            onPress={() => {
-              sideMenuRef.current?.openDrawer();
-            }}
-            style={{
-              alignItems: 'center',
-              height: 35,
-              justifyContent: 'center',
-            }}>
-            <Icon
-              style={{
-                marginTop: noTextMode ? 0 : 7.5,
-              }}
-              name="menu"
-              size={SIZE.lg}
-              color={colors.pri}
-            />
-          </TouchableOpacity>
-        ) : null}
-      </View>
-
       <ScrollView
         alwaysBounceVertical={false}
-        contentContainerStyle={{minHeight: '50%'}}
+        contentContainerStyle={{
+          minHeight: '50%',
+        }}
         showsVerticalScrollIndicator={false}>
         {listItems.map((item, index) => (
           <MenuListItem
@@ -203,7 +161,7 @@ export const Menu = ({
           }}>
           {listItems2.map((item, index) => (
             <MenuListItem
-              testID={item.name == "Night mode" ? "night_mode" : item.name}
+              testID={item.name == 'Night mode' ? 'night_mode' : item.name}
               key={item.name}
               item={item}
               index={index}
@@ -216,6 +174,6 @@ export const Menu = ({
 
         <UserSection noTextMode={noTextMode} />
       </View>
-    </AnimatedSafeAreaView>
+    </View>
   );
 };

apps/mobile/src/components/Premium/PendingDialog.js

@@ -3,7 +3,7 @@ import {Text, View} from 'react-native';
 import {SIZE, WEIGHT} from '../../common/common';
 import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
 import {eClosePendingDialog, eOpenPendingDialog} from '../../services/events';
-import {db, w} from '../../utils/utils';
+import {db, DDS, w} from '../../utils/utils';
 import ActionSheet from '../ActionSheet';
 import Seperator from '../Seperator';
 
@@ -54,13 +54,27 @@ class PendingDialog extends React.Component {
           width: '100%',
           alignSelf: 'center',
           borderRadius: 10,
+          width: DDS.isTab? 500 : '100%',
+          borderRadius: 10,
+          marginBottom: DDS.isTab ? 50 : 0,
         }}
+        extraScroll={DDS.isTab ? 50 : 0}
         gestureEnabled={true}
+        footerAlwaysVisible={DDS.isTab}
+        footerHeight={DDS.isTab ? 20 : 10}
+        footerStyle={
+          DDS.isTab
+            ? {
+                borderRadius: 10,
+                backgroundColor: colors.bg,
+              }
+            : null
+        }
         ref={actionSheet}
         initialOffsetFromBottom={1}>
         <View
           style={{
-            width: w,
+            width: DDS.isTab? 500 : w,
             backgroundColor: colors.bg,
             justifyContent: 'space-between',
             paddingHorizontal: 12,

apps/mobile/src/components/Premium/PremiumDialog.js

@@ -5,7 +5,7 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import {SIZE, WEIGHT} from '../../common/common';
 import {eSendEvent} from '../../services/eventManager';
 import {eOpenLoginDialog, eOpenPendingDialog} from '../../services/events';
-import {db, h, itemSkus, ToastEvent, w} from '../../utils/utils';
+import {db, DDS, h, itemSkus, ToastEvent, w} from '../../utils/utils';
 import ActionSheet from '../ActionSheet';
 import {Button} from '../Button';
 import Seperator from '../Seperator';
@@ -66,16 +66,30 @@ class PremiumDialog extends React.Component {
       <ActionSheet
         containerStyle={{
           backgroundColor: colors.bg,
-          width: '100%',
+          width: DDS.isTab ? 500 : '100%',
           alignSelf: 'center',
           borderRadius: 10,
+        
+          marginBottom: DDS.isTab ? 50 : 0,
         }}
+        extraScroll={DDS.isTab ? 50 : 0}
+        gestureEnabled={true}
+        footerAlwaysVisible={DDS.isTab}
+        footerHeight={DDS.isTab ? 20 : 10}
+        footerStyle={
+          DDS.isTab
+            ? {
+                borderRadius: 10,
+                backgroundColor: colors.bg,
+              }
+            : null
+        }
         gestureEnabled={true}
         ref={this.actionSheetRef}
         initialOffsetFromBottom={1}>
         <View
           style={{
-            width: w,
+            width: DDS.isTab ? 500 : w,
             backgroundColor: colors.bg,
             justifyContent: 'space-between',
             paddingHorizontal: 12,
@@ -97,7 +111,7 @@ class PremiumDialog extends React.Component {
           <ScrollView
             style={{
               width: '100%',
-              maxHeight: h * 0.5,
+              maxHeight:DDS.isTab? h * 0.35 : h * 0.5,
             }}
             nestedScrollEnabled={true}
             showsVerticalScrollIndicator={false}>

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

@@ -1,14 +1,14 @@
 import React, {useEffect, useState} from 'react';
-import {Dimensions, Text, View, FlatList} from 'react-native';
+import {FlatList, Text, View} from 'react-native';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import RNFetchBlob from 'rn-fetch-blob';
 import {ph, SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
+import {ACTIONS} from '../../provider/actions';
 import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
-import {
+import {eCloseRestoreDialog, eOpenRestoreDialog} from '../../services/events';
-  eCloseProgressDialog,
+import storage from '../../utils/storage';
-  eCloseRestoreDialog,
-  eOpenProgressDialog,
-  eOpenRestoreDialog,
-} from '../../services/events';
 import {
   db,
   getElevation,
@@ -16,23 +16,18 @@ import {
   sleep,
   ToastEvent,
 } from '../../utils/utils';
-import BaseDialog from '../Dialog/base-dialog';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import RNFetchBlob from 'rn-fetch-blob';
-import storage from '../../utils/storage';
-import {PressableButton} from '../PressableButton';
 import {Button} from '../Button';
+import BaseDialog from '../Dialog/base-dialog';
 import {Loading} from '../Loading';
-import {ACTIONS} from '../../provider/actions';
 
 const RestoreDialog = () => {
   const [state, dispatch] = useTracked();
   const {colors, tags, premiumUser} = state;
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   const [files, setFiles] = useState([]);
   const [restoring, setRestoring] = useState(false);
   const insets = useSafeAreaInsets();
+
   useEffect(() => {
     eSubscribeEvent(eOpenRestoreDialog, open);
     eSubscribeEvent(eCloseRestoreDialog, close);
@@ -55,6 +50,11 @@ const RestoreDialog = () => {
       animation="slide"
       visible={visible}
       onShow={async () => {
+        let granted = await requestStoragePermission();
+        if (!granted) {
+          ToastEvent.show('Storage permission required to check for backups.');
+          return;
+        }
         await storage.checkAndCreateDir(
           RNFetchBlob.fs.dirs.SDCardDir + '/Notesnook/backups',
         );
@@ -74,7 +74,7 @@ const RestoreDialog = () => {
           backgroundColor: colors.bg,
           paddingHorizontal: 12,
           paddingVertical: 20,
-          paddingTop: insets.top,
+          paddingTop: 0,
         }}>
         <BaseDialog visible={restoring}>
           <View
@@ -107,6 +107,7 @@ const RestoreDialog = () => {
             justifyContent: 'center',
             alignItems: 'center',
             height: 50,
+            marginTop: insets.top,
           }}>
           <Icon
             name="close"

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

@@ -42,6 +42,7 @@ const SimpleList = ({
   );
   const insets = useSafeAreaInsets();
   const listData = data;
+  const dataType = type;
   const _onScroll = (event) => {
     if (!event) return;
     let y = event.nativeEvent.contentOffset.y;
@@ -65,24 +66,6 @@ const SimpleList = ({
     );
   }, [listData]);
 
-  const _ListFooterComponent = listData[0] ? (
-    <View
-      style={{
-        height: 150,
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}>
-      <Text
-        style={{
-          color: colors.nav,
-          fontSize: SIZE.sm,
-          fontFamily: WEIGHT.regular,
-        }}>
-        - End -
-      </Text>
-    </View>
-  ) : null;
-
   const RenderSectionHeader = ({item}) => (
     <Text
       style={[
@@ -191,7 +174,7 @@ const SimpleList = ({
       case 'note':
         return <RenderItem item={data} pinned={data.pinned} index={index} />;
       case 'MAIN_HEADER':
-        return <ListHeaderComponent type={type} data={listData} />;
+        return <ListHeaderComponent type={dataType} data={listData} />;
       case 'header':
         return <RenderSectionHeader item={data} />;
 

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

@@ -6,7 +6,7 @@ import {SIZE} from '../../common/common';
 import {useTracked} from '../../provider';
 import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/eventManager';
 import {eHideToast, eShowToast} from '../../services/events';
-import {getElevation} from '../../utils/utils';
+import {DDS, getElevation, sleep} from '../../utils/utils';
 const {spring, timing} = Animated;
 
 const toastMessages = [];
@@ -91,7 +91,9 @@ export const Toast = ({context = 'global'}) => {
         toValue: 300,
         duration: 200,
         easing: Easing.inOut(Easing.ease),
-      }).start(() => {
+      }).start(async () => {
+        await sleep(300);
+        console.log(toastMessages);
         toastMessages.shift();
         setData({});
       });
@@ -99,11 +101,11 @@ export const Toast = ({context = 'global'}) => {
   };
 
   const _onKeyboardShow = () => {
-    //setKeyboard(true);
+    setKeyboard(true);
   };
 
   const _onKeyboardHide = () => {
-    //setKeyboard(false);
+    setKeyboard(false);
   };
 
   useEffect(() => {
@@ -115,16 +117,17 @@ export const Toast = ({context = 'global'}) => {
     return () => {
       Keyboard.removeListener('keyboardDidShow', _onKeyboardShow);
       Keyboard.removeListener('keyboardDidHide', _onKeyboardHide);
-      eUnSubscribeEvent('showToast', showToastFunc);
+      eUnSubscribeEvent(eShowToast, showToastFunc);
-      eUnSubscribeEvent('hideToast', hideToastFunc);
+      eUnSubscribeEvent(eHideToast, hideToastFunc);
     };
   }, []);
 
   return (
     <Animated.View
       style={{
-        width: '100%',
+        width: DDS.isTab ? '30%' : '100%',
         alignItems: 'center',
+        alignSelf:'center',
         minHeight: 30,
         bottom: keyboard ? 30 : 100,
         position: 'absolute',

apps/mobile/src/services/Navigator.js

@@ -5,6 +5,7 @@ import * as React from 'react';
 import Container from '../components/Container';
 import {Menu} from '../components/Menu';
 import {rootNavigatorRef, sideMenuRef} from '../utils/refs';
+import {DDS, w} from '../utils/utils';
 import Favorites from '../views/Favorites';
 import Folders from '../views/Folders';
 import Home from '../views/Home/index';
@@ -60,6 +61,7 @@ const DrawerComponent = (props) => {
     <Menu
       menuProps={props}
       hide={false}
+      noTextMode={DDS.isTab}
       close={() => NavigationService.closeDrawer()}
     />
   );
@@ -91,8 +93,12 @@ export const NavigationStack = ({component = MainComponent}) => {
         screenOptions={{
           swipeEnabled: locked ? false : true,
         }}
+        drawerStyle={{
+          width:DDS.isTab? w *0.04 : null,
+          borderRightColor:'#f0f0f0'
+        }}
         edgeWidth={200}
-        drawerType="slide"
+        drawerType={DDS.isTab ? 'permanent' : 'slide'}
         drawerContent={DrawerComponent}
         initialRouteName="Main">
         <Drawer.Screen name="Main" component={component} />

apps/mobile/src/utils/utils.js

@@ -57,6 +57,16 @@ export const history = {
   selectedItemsList: [],
 };
 
+export async function showContext(event, title) {
+  eSendEvent('showContextMenu', {
+    location: {
+      x: event.nativeEvent.pageX + 50,
+      y: event.nativeEvent.pageY - 10,
+    },
+    title: title,
+  });
+}
+
 export async function requestStoragePermission() {
   let granted = false;
   try {

apps/mobile/src/views/Editor/func.js

@@ -262,13 +262,12 @@ export async function onWebViewLoad(noMenu, premium, colors) {
 }
 
 const loadNoteInEditor = async () => {
-  title = note.title;
-  id = note.id;
   saveCounter = 0;
   content = {};
   content.text = '';
-
+  if (note?.id) {
-  if (note.id) {
+    title = note.title;
+    id = note.id;
     content.text = await db.notes.note(id).text();
     post('dateEdited', timeConverter(note.dateEdited));
     await sleep(50);

apps/mobile/src/views/Editor/index.js

@@ -62,6 +62,15 @@ const Editor = ({noMenu}) => {
     post('theme', colors);
   }, [colors.bg]);
 
+  useEffect(() => {
+    if (!DDS.isTab) return;
+    if (noMenu) {
+      post('nomenu', true);
+    } else {
+      post('nomenu', false);
+    }
+  }, [noMenu]);
+
   useEffect(() => {
     eSubscribeEvent(eOnLoadNote, load);
     eSubscribeEvent(eCloseFullscreenEditor, closeFullscreen);
@@ -166,17 +175,46 @@ const Editor = ({noMenu}) => {
           height: '100%',
           width: '100%',
         }}>
+        {noMenu ? (
+          <View />
+        ) : (
+          <ActionIcon
+            name="arrow-left"
+            color={colors.heading}
+            onPress={_onBackPress}
+            iconStyle={{
+              textVerticalAlign: 'center',
+            }}
+            customStyle={{
+              marginLeft: -5,
+              position: 'absolute',
+              marginTop:
+                Platform.OS === 'ios' ? 0 : StatusBar.currentHeight + 5,
+              zIndex: 11,
+              left: 0,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          />
+        )}
+
         <View
           style={{
-            marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
             flexDirection: 'row',
-            width: '100%',
+            width: DDS.isTab ? '30%' : '100%',
             height: 50,
             justifyContent: 'space-between',
             alignItems: 'center',
             paddingHorizontal: 12,
+            position: DDS.isTab ? 'absolute' : 'relative',
+            backgroundColor: colors.bg,
+            right: 0,
+            marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
+            zIndex: 10,
           }}>
-          {noMenu ? null : (
+          {DDS.isTab ? (
+            <View />
+          ) : (
             <ActionIcon
               name="arrow-left"
               color={colors.heading}
@@ -303,6 +341,7 @@ const Editor = ({noMenu}) => {
             maxHeight: '100%',
             width: '100%',
             backgroundColor: 'transparent',
+            marginTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
           }}
           onMessage={_onMessage}
         />

apps/mobile/src/views/Settings/index.js

@@ -12,6 +12,7 @@ import {
 } from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import RNFetchBlob from 'rn-fetch-blob';
 import {
   ACCENT,
   COLOR_SCHEME,
@@ -30,19 +31,24 @@ import {useTracked} from '../../provider';
 import {ACTIONS} from '../../provider/actions';
 import {eSendEvent} from '../../services/eventManager';
 import {
+  eCloseProgressDialog,
   eOpenLoginDialog,
   eOpenPremiumDialog,
+  eOpenProgressDialog,
   eOpenRecoveryKeyDialog,
+  eOpenRestoreDialog,
   eResetApp,
 } from '../../services/events';
 import NavigationService from '../../services/NavigationService';
-import {MMKV} from '../../utils/storage';
+import storage, {MMKV} from '../../utils/storage';
 import {
   db,
   DDS,
   hexToRGBA,
+  requestStoragePermission,
   RGB_Linear_Shade,
   setSetting,
+  sleep,
   ToastEvent,
   w,
 } from '../../utils/utils';
@@ -132,6 +138,60 @@ export const Settings = ({route, navigation}) => {
     </Text>
   );
 
+  const backupItemsList = [
+    {
+      name: 'Backup data',
+      func: async () => {
+        let granted = requestStoragePermission();
+        if (!granted) {
+          ToastEvent.show('Backup failed! Storage access was denied.');
+          return;
+        }
+
+        eSendEvent(eOpenProgressDialog, {
+          title: 'Backing up your data',
+          paragraph:
+            "All your backups are stored in 'Phone Storage/Notesnook/backups' folder",
+        });
+        let backup = await db.backup.export();
+        let backupName =
+          'notesnook_backup_' + new Date().toString() + '.nnbackup';
+        let path = RNFetchBlob.fs.dirs.SDCardDir + '/Notesnook/backups/';
+        await storage.checkAndCreateDir(path);
+        await RNFetchBlob.fs.writeFile(path + backupName, backup, 'utf8');
+
+        await sleep(2000);
+        eSendEvent(eCloseProgressDialog);
+        ToastEvent.show('Backup complete!', 'success');
+        //Linking.openURL('https://www.notesnook.com/privacy.html');
+      },
+      desc: 'Backup all your data to phone storage',
+    },
+    {
+      name: 'Restore backup',
+      func: () => {
+        eSendEvent(eOpenRestoreDialog);
+      },
+      desc: 'Restore backup from your phone.',
+    },
+  ];
+
+  const switchTheme = async () => {
+    await setSetting(settings, 'useSystemTheme', !settings.useSystemTheme);
+
+    if (!settings.useSystemTheme) {
+      MMKV.setStringAsync(
+        'theme',
+        JSON.stringify({night: Appearance.getColorScheme() === 'dark'}),
+      );
+      changeColorScheme(
+        Appearance.getColorScheme() === 'dark'
+          ? COLOR_SCHEME_DARK
+          : COLOR_SCHEME_LIGHT,
+      );
+    }
+  };
+
   const CustomButton = ({title, tagline, customComponent, onPress}) => (
     <PressableButton
       color="transparent"
@@ -462,8 +522,8 @@ export const Settings = ({route, navigation}) => {
                 alignItems: 'center',
                 marginHorizontal: 5,
                 marginVertical: 5,
-                width: w / 5 - 35,
+                width: DDS.isTab ? (w * 0.28) / 5 - 35 : w / 5 - 35,
-                height: w / 5 - 35,
+                height: DDS.isTab ? (w * 0.28) / 5 - 35 : w / 5 - 35,
                 borderRadius: 100,
                 justifyContent: 'center',
                 alignItems: 'center',
@@ -482,25 +542,7 @@ export const Settings = ({route, navigation}) => {
               ? 'Switch to dark theme based on system settings'
               : 'Keep the app theme independent from system settings'
           }
-          onPress={async () => {
+          onPress={switchTheme}
-            await setSetting(
-              settings,
-              'useSystemTheme',
-              !settings.useSystemTheme,
-            );
-
-            if (!settings.useSystemTheme) {
-              MMKV.setStringAsync(
-                'theme',
-                JSON.stringify({night: Appearance.getColorScheme() === 'dark'}),
-              );
-              changeColorScheme(
-                Appearance.getColorScheme() === 'dark'
-                  ? COLOR_SCHEME_DARK
-                  : COLOR_SCHEME_LIGHT,
-              );
-            }
-          }}
           customComponent={
             <Icon
               size={SIZE.xl}
@@ -645,22 +687,7 @@ export const Settings = ({route, navigation}) => {
 
         <SectionHeader title="Backup & Restore" />
 
-        {[
+        {backupItemsList.map((item) => (
-          {
-            name: 'Backup data',
-            func: () => {
-              Linking.openURL('https://www.notesnook.com/privacy.html');
-            },
-            desc: 'Backup all your data to phone storage',
-          },
-          {
-            name: 'Restore data',
-            func: () => {
-              Linking.openURL('https://www.notesnook.com');
-            },
-            desc: 'Restore backup from your phone.',
-          },
-        ].map((item) => (
           <CustomButton
             key={item.name}
             title={item.name}
@@ -686,13 +713,13 @@ export const Settings = ({route, navigation}) => {
               textAlignVertical: 'center',
               color: colors.pri,
             }}>
-            Backup reminder{'\n'}
+            Auto Backup{'\n'}
             <Text
               style={{
                 fontSize: SIZE.xs,
                 color: colors.icon,
               }}>
-              Remind you to backup data.
+              Backup your data automatically.
             </Text>
           </Text>
 
@@ -747,7 +774,7 @@ export const Settings = ({route, navigation}) => {
           title="Encrypted Backups"
           tagline="Encrypt your data before backup"
           onPress={async () => {
-            if (!user) {
+            if (!user || !user.id) {
               ToastEvent.show(
                 'You must login to enable encryption',
                 'error',