fix: ui issues on ipad

apps/mobile/ios/Podfile.lock

@@ -653,7 +653,7 @@ SPEC CHECKSUMS:
   React: dbd201f781b180eab148aa961683943c72f67dcf
   React-bridging: 10a863fdc0fc6f9c9f8527640936b293cd288bdc
   React-callinvoker: 6ad32eee2630dab9023de5df2a6a8cacbfc99a67
-  React-Codegen: fe3423fa6f37d05e233ab0e85e34fe0b443a5654
+  React-Codegen: 20ed65b0b247402f78ed54d352e97dd19789e4d1
   React-Core: 6177b1f2dd794fe202a5042d3678b2ddfcbfb7d4
   React-CoreModules: c74e6b155f9876b1947fc8a13f0cb437cc7f6dcd
   React-cxxreact: a07b7d90c4c71dd38c7383c7344b34d0a1336aee

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

@@ -190,10 +190,11 @@ export const Login = ({ changeMode, welcome }) => {
         </View>
         <View
           style={{
-            width: focused ? '100%' : '99.9%',
+            width: DDS.isTab ? (focused ? '50%' : '49.99%') : focused ? '100%' : '99.9%',
             padding: 12,
             backgroundColor: colors.bg,
-            flexGrow: 1
+            flexGrow: 1,
+            alignSelf: 'center'
           }}
         >
           <Input

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

@@ -139,10 +139,11 @@ export const Signup = ({ changeMode, welcome, trial }) => {
         </View>
         <View
           style={{
-            width: '100%',
+            width: DDS.isTab ? '50%' : '100%',
             padding: 12,
             backgroundColor: colors.bg,
-            flexGrow: 1
+            flexGrow: 1,
+            alignSelf: 'center'
           }}
         >
           <Input

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

@@ -16,7 +16,11 @@ export const LeftMenus = () => {
 
   const onLeftButtonPress = () => {
     if (!canGoBack) {
+      if (tabBarRef.current?.isDrawerOpen()) {
+        Navigation.closeDrawer();
+      } else {
         Navigation.openDrawer();
+      }
       return;
     }
     Navigation.goBack();

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

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { Dimensions, Image, TouchableOpacity, useWindowDimensions, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { DDS } from '../../services/device-detection';
 import SettingsService from '../../services/settings';
 import { useSettingStore } from '../../stores/use-setting-store';
 import { useThemeStore } from '../../stores/use-theme-store';
@@ -153,7 +154,7 @@ const Intro = ({ navigation, route }) => {
       <BouncingView
         style={{
           position: 'absolute',
-          bottom: -100,
+          bottom: DDS.isTab ? -300 : -100,
           zIndex: -1
         }}
         duration={3000}

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import Animated, { FadeInDown } from 'react-native-reanimated';
+import { DDS } from '../../services/device-detection';
 import { eSendEvent } from '../../services/event-manager';
 import Navigation from '../../services/navigation';
 import SettingsService from '../../services/settings';
@@ -25,7 +26,8 @@ export const WelcomeNotice = () => {
         padding: 12,
         alignItems: 'center',
         justifyContent: 'center',
-        width: '100%'
+        width: DDS.isTab ? '50%' : '95%',
+        alignSelf: 'center'
       }}
     >
       <SvgView width={200} height={200} src={IMAGE(colors.accent)} />

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

@@ -16,6 +16,7 @@ import Animated, {
   withSpring,
   withTiming
 } from 'react-native-reanimated';
+import { useSettingStore } from '../../stores/use-setting-store';
 
 interface TabProps extends ViewProps {
   dimensions: { width: number; height: number };
@@ -44,6 +45,7 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(
     { children, dimensions, widths, onChangeTab, onScroll, enabled, onDrawerStateChange }: TabProps,
     ref
   ) => {
+    const deviceMode = useSettingStore(state => state.deviceMode);
     const translateX = useSharedValue(widths ? widths.a : 0);
     const startX = useSharedValue(0);
     const currentTab = useSharedValue(1);
@@ -58,9 +60,11 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(
     const [disabled, setDisabled] = useState(false);
     const node = useRef<Animated.View>(null);
     const containerWidth = widths ? widths.a + widths.b + widths.c : dimensions.width;
+    console.log(containerWidth, dimensions.width);
     const drawerPosition = 0;
     const homePosition = widths.a;
     const editorPosition = widths.a + widths.b;
+    const isSmallTab = deviceMode === 'smallTablet';
 
     useEffect(() => {
       const sub = BackHandler.addEventListener('hardwareBackPress', () => {
@@ -189,7 +193,13 @@ export const FluidTabs = forwardRef<TabsRef, TabProps>(
       .onChange(event => {
         if (locked.value || forcedLock.value) return;
         let value = translateX.value + event.changeX * -1;
-        if (value < 0 || currentTab.value === 2 || value > editorPosition) return;
+        if (
+          value < 0 ||
+          currentTab.value === 2 ||
+          value > editorPosition ||
+          (value >= homePosition && isSmallTab)
+        )
+          return;
         translateX.value = value;
       })
       .onEnd(event => {

apps/mobile/src/navigation/tabsholder.js

@@ -12,7 +12,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { notesnook } from '../../e2e/test.ids';
 import { SideMenu } from '../components/side-menu';
 import { FluidTabs } from '../components/tabs';
-import { editorState } from '../screens/editor/tiptap/utils';
+import { editorController, editorState } from '../screens/editor/tiptap/utils';
 import { EditorWrapper } from '../screens/editor/wrapper';
 import { DDS } from '../services/device-detection';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../services/event-manager';
@@ -46,6 +46,7 @@ export const TabsHolder = React.memo(
     const animatedTranslateY = useSharedValue(-9999);
     const overlayRef = useRef();
     const [orientation, setOrientation] = useState(getInitialOrientation());
+    const introCompleted = useSettingStore(state => state.settings.introCompleted);
 
     const onOrientationChange = (o, o2) => {
       setOrientation(o || o2);
@@ -63,6 +64,7 @@ export const TabsHolder = React.memo(
 
     const showFullScreenEditor = () => {
       setFullscreen(true);
+      tabBarRef.current?.openDrawer();
       editorRef.current?.setNativeProps({
         style: {
           width: dimensions.width,
@@ -74,7 +76,11 @@ export const TabsHolder = React.memo(
     };
 
     const closeFullScreenEditor = () => {
+      tabBarRef.current?.closeDrawer();
       setFullscreen(false);
+      editorController.current?.commands.updateSettings({
+        fullscreen: false
+      });
       editorRef.current?.setNativeProps({
         style: {
           width:
@@ -287,7 +293,7 @@ export const TabsHolder = React.memo(
           <FluidTabs
             ref={tabBarRef}
             dimensions={dimensions}
-            widths={widths[deviceMode]}
+            widths={!introCompleted ? widths['mobile'] : widths[deviceMode]}
             enabled={deviceMode !== 'tablet'}
             onScroll={onScroll}
             onChangeTab={onChangeTab}
@@ -297,7 +303,7 @@ export const TabsHolder = React.memo(
               key="1"
               style={{
                 height: '100%',
-                width: fullscreen ? 0 : widths[deviceMode]?.a
+                width: fullscreen ? 0 : widths[!introCompleted ? 'mobile' : deviceMode]?.a
               }}
             >
               <SideMenu />
@@ -307,7 +313,7 @@ export const TabsHolder = React.memo(
               key="2"
               style={{
                 height: '100%',
-                width: fullscreen ? 0 : widths[deviceMode]?.b
+                width: fullscreen ? 0 : widths[!introCompleted ? 'mobile' : deviceMode]?.b
               }}
             >
               {deviceMode === 'mobile' ? (

apps/mobile/src/screens/editor/index.tsx

@@ -136,7 +136,7 @@ const Editor = React.memo(
             allowUniversalAccessFromFileURLs={true}
             originWhitelist={['*']}
             source={{
-              uri: __DEV__ ? 'http://localhost:3000/' : EDITOR_URI
+              uri: __DEV__ ? 'http://192.168.10.7:3000' : EDITOR_URI
             }}
             style={style}
             autoManageStatusBarEnabled={false}

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

@@ -117,6 +117,19 @@ typeof globalThis.statusBar !== "undefined" && statusBar.current.set({date:"",sa
     `);
   };
 
+  updateSettings = async (settings?: Partial<Settings>) => {
+    if (!this.previousSettings) return;
+    this.previousSettings = {
+      ...this.previousSettings,
+      ...settings
+    };
+    await this.doAsync(`
+      if (typeof globalThis.settingsController !== "undefined") {
+        globalThis.settingsController.update(${JSON.stringify(this.previousSettings)}) 
+      }
+    `);
+  };
+
   setSettings = async (settings?: Partial<Settings>) => {
     if (settings) {
       this.previousSettings = settings;

apps/mobile/src/screens/editor/tiptap/useEditor.ts

@@ -341,6 +341,7 @@ export const useEditor = (
       await commands.setPlaceholder(placeholderTip.current);
       isDefaultEditor && restoreEditorState();
     }
+    commands.setSettings();
   }, [state, currentNote, loadNote]);
 
   async function restoreEditorState() {

apps/mobile/src/screens/editor/tiptap/useEditorEvents.ts

@@ -21,6 +21,7 @@ import {
   eClearEditor,
   eCloseFullscreenEditor,
   eOnLoadNote,
+  eOpenFullscreenEditor,
   eOpenLoginDialog,
   eOpenPremiumDialog,
   eOpenPublishNoteDialog,
@@ -48,7 +49,8 @@ export const EventTypes = {
   back: 'editor-event:back',
   pro: 'editor-event:pro',
   monograph: 'editor-event:monograph',
-  properties: 'editor-event:properties'
+  properties: 'editor-event:properties',
+  fullscreen: 'editor-event:fullscreen'
 };
 
 const publishNote = async (editor: useEditorType) => {
@@ -124,17 +126,26 @@ export const useEditorEvents = (
   if (!editor) return null;
 
   useEffect(() => {
-    console.log('settings', readonly);
+    console.log('settings', fullscreen);
     editor.commands.setSettings({
       deviceMode: deviceMode || 'mobile',
-      fullscreen: fullscreen,
+      fullscreen: fullscreen || false,
       premium: isPremium,
       readonly: readonly || editorPropReadonly,
       tools: tools,
       noHeader: noHeader,
       noToolbar: readonly || editorPropReadonly || noToolbar
     });
-  }, [fullscreen, isPremium, readonly, editor.sessionId, editor.loading, tools, editor.commands]);
+  }, [
+    fullscreen,
+    isPremium,
+    readonly,
+    editor.sessionId,
+    editor.loading,
+    deviceMode,
+    tools,
+    editor.commands
+  ]);
 
   const onBackPress = useCallback(async () => {
     const editorHandledBack = await editor.commands.handleBack();
@@ -163,7 +174,7 @@ export const useEditorEvents = (
       editorState().currentlyEditing = false;
       editor.reset();
     }, 1);
-  }, []);
+  }, [fullscreen, deviceMode]);
 
   const onHardwareBackPress = useCallback(() => {
     if (editorState().currentlyEditing) {
@@ -302,6 +313,10 @@ export const useEditorEvents = (
       case EventTypes.properties:
         showActionsheet(editor);
         break;
+      case EventTypes.fullscreen:
+        editorState().isFullscreen = true;
+        eSendEvent(eOpenFullscreenEditor);
+        break;
       case EventTypes.back:
         onBackPress();
         break;

apps/mobile/src/screens/editor/wrapper.js

@@ -1,12 +1,5 @@
 import React, { useEffect } from 'react';
-import {
+import { AppState, KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
-  AppState,
-  KeyboardAvoidingView,
-  Platform,
-  SafeAreaView,
-  TextInput,
-  View
-} from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Editor from '.';
 import { PremiumToast } from '../../components/premium/premium-toast';
@@ -16,6 +9,7 @@ import { useSettingStore } from '../../stores/use-setting-store';
 import { useThemeStore } from '../../stores/use-theme-store';
 import { editorRef } from '../../utils/global-refs';
 import useIsFloatingKeyboard from '../../utils/hooks/use-is-floating-keyboard';
+import useKeyboard from '../../utils/hooks/use-keyboard';
 import { ProgressBar } from './progress';
 import { editorController, editorState, textInput } from './tiptap/utils';
 
@@ -26,6 +20,7 @@ export const EditorWrapper = ({ width }) => {
   const insets = useSafeAreaInsets();
   const floating = useIsFloatingKeyboard();
   const introCompleted = useSettingStore(state => state.settings.introCompleted);
+  const keyboard = useKeyboard();
 
   const onAppStateChanged = async state => {
     if (editorState().movedAway) return;
@@ -47,7 +42,7 @@ export const EditorWrapper = ({ width }) => {
       testID="editor-wrapper"
       ref={editorRef}
       style={{
-        width: width[deviceMode]?.c,
+        width: width[!introCompleted ? 'mobile' : deviceMode]?.c,
         height: '100%',
         backgroundColor: colors.bg,
         borderLeftWidth: DDS.isTab ? 1 : 0,
@@ -58,7 +53,13 @@ export const EditorWrapper = ({ width }) => {
         <KeyboardAvoidingView
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
           style={{
-            flex: 1
+            flex: 1,
+            marginBottom:
+              Platform.OS === 'ios'
+                ? keyboard?.keyboardShown && !floating
+                  ? 16
+                  : insets.bottom
+                : 6
           }}
           enabled={!floating}
           keyboardVerticalOffset={0}

apps/mobile/src/screens/settings/applock.js

@@ -11,6 +11,7 @@ import { SvgView } from '../../components/ui/svg';
 import { BouncingView } from '../../components/ui/transitions/bouncing-view';
 import Heading from '../../components/ui/typography/heading';
 import Paragraph from '../../components/ui/typography/paragraph';
+import { DDS } from '../../services/device-detection';
 import { presentSheet } from '../../services/event-manager';
 import SettingsService from '../../services/settings';
 import { useSettingStore } from '../../stores/use-setting-store';
@@ -68,7 +69,7 @@ const AppLock = ({ navigation, route }) => {
                 flexDirection: 'row',
                 alignItems: 'flex-end',
                 justifyContent: 'space-between',
-                width: '95%',
+                width: DDS.isTab && welcome ? '50%' : '95%',
                 paddingVertical: 12,
                 paddingHorizontal: 0,
                 alignSelf: 'center',
@@ -108,7 +109,9 @@ const AppLock = ({ navigation, route }) => {
             <Seperator />
             <View
               style={{
-                paddingHorizontal: 12
+                paddingHorizontal: 12,
+                width: DDS.isTab && welcome ? '50%' : undefined,
+                alignSelf: 'center'
               }}
             >
               {modes.map(item => (
@@ -187,7 +190,7 @@ const AppLock = ({ navigation, route }) => {
           <BouncingView
             style={{
               position: 'absolute',
-              bottom: -130,
+              bottom: DDS.isTab ? -300 : -130,
               zIndex: -1
             }}
             animated={false}