minor fixes in ui for tabs

apps/mobile/App.js

@@ -10,6 +10,8 @@ import SideMenu from './src/components/SideMenu';
 import {Toast} from './src/components/Toast';
 import {useTracked} from './src/provider';
 import {ACTIONS} from './src/provider/actions';
+import Orientation from 'react-native-orientation';
+
 import {eSubscribeEvent, eUnSubscribeEvent} from './src/services/eventManager';
 import {
   eCloseFullscreenEditor,
@@ -28,6 +30,7 @@ import StorageInterface from './src/utils/storage';
 import {w} from './src/utils/utils';
 import Editor from './src/views/Editor';
 import Animated, {Easing} from 'react-native-reanimated';
+import {useForceUpdate} from './src/views/ListsEditor';
 
 export const DDS = new DeviceDetectionService();
 export const db = new Storage(StorageInterface);
@@ -41,7 +44,7 @@ const {color, Value, timing, interpolate} = Animated;
 const App = () => {
   const [state, dispatch] = useTracked();
   const {colors, loading} = state;
-
+  const forceUpdate = useForceUpdate();
   const [init, setInit] = useState(false);
   const [fullscreen, setFullscreen] = useState(false);
 
@@ -91,7 +94,16 @@ const App = () => {
     });
   };
 
+  const _onOrientationChange = o => {
+    // Currently orientation is locked on tablet.
+    /* DDS.checkOrientation();
+    setTimeout(() => {
+      alert('here');
+      forceUpdate();
+    }, 1000); */
+  };
   useEffect(() => {
+    Orientation.addOrientationListener(_onOrientationChange);
     eSubscribeEvent(eDispatchAction, type => {
       dispatch(type);
     });
@@ -99,10 +111,12 @@ const App = () => {
       eUnSubscribeEvent(eDispatchAction, type => {
         dispatch(type);
       });
+      Orientation.removeOrientationListener(_onOrientationChange);
     };
   }, []);
 
   useEffect(() => {
+    Orientation.lockToLandscape();
     eSubscribeEvent(eOpenSideMenu, openSidebar);
     eSubscribeEvent(eCloseSideMenu, closeSidebar);
 

apps/mobile/ios/Notes/AppDelegate.m

@@ -10,6 +10,7 @@
 #import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
+#import "Orientation.h"
 
 @implementation AppDelegate
 
@@ -39,4 +40,9 @@
 #endif
 }
 
+- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
+  return [Orientation getOrientation];
+  
+}
+
 @end

apps/mobile/ios/Podfile.lock

@@ -188,6 +188,8 @@ PODS:
   - react-native-fast-storage (0.1.4):
     - MMKV (= 1.0.23)
     - React
+  - react-native-orientation (3.1.3):
+    - React
   - react-native-webview (7.5.1):
     - React
   - React-RCTActionSheet (0.61.5):
@@ -258,6 +260,7 @@ DEPENDENCIES:
   - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
   - react-native-aes (from `../node_modules/react-native-aes-crypto`)
   - react-native-fast-storage (from `../node_modules/react-native-fast-storage`)
+  - react-native-orientation (from `../node_modules/react-native-orientation`)
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -316,6 +319,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-aes-crypto"
   react-native-fast-storage:
     :path: "../node_modules/react-native-fast-storage"
+  react-native-orientation:
+    :path: "../node_modules/react-native-orientation"
   react-native-webview:
     :path: "../node_modules/react-native-webview"
   React-RCTActionSheet:
@@ -372,6 +377,7 @@ SPEC CHECKSUMS:
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
   react-native-aes: 22ea989d641f53ea7722fe6b146349ed66e6455d
   react-native-fast-storage: bc274e68f7d87ffe777a1d20479544b7cd429b1d
+  react-native-orientation: f1caf84d65f1a4fd4511a18f2b924e634ad7a628
   react-native-webview: 2aadbfef6b9eaa9e89b306ae3e31e6e870a6306d
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360

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

@@ -63,7 +63,7 @@ export const ActionSheetComponent = ({
 
   function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
     let newColors = setColorScheme(colors, accent);
-    StatusBar.setBarStyle(newColors.night ? 'light-content' : 'dark-content');
+    StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
 
     dispatch({type: ACTIONS.THEME, colors: newColors});
   }
@@ -180,8 +180,8 @@ export const ActionSheetComponent = ({
       func: () => {
         dispatch({type: ACTIONS.MODAL_NAVIGATOR, enabled: true});
         dispatch({type: ACTIONS.SELECTED_ITEMS, item: note});
-        moveNoteEvent();
-        close();
+
+        close('movenote');
       },
     },
     {

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

@@ -375,6 +375,10 @@ export class DialogManager extends Component {
           this.showAddTOpic();
           break;
         }
+        case 'movenote': {
+          moveNoteEvent();
+          break;
+        }
       }
     }
     this.show = null;

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

@@ -46,7 +46,7 @@ export const Menu = ({
 
   function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
     let newColors = setColorScheme(colors, accent);
-    StatusBar.setBarStyle(newColors.night ? 'light-content' : 'dark-content');
+    StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
 
     dispatch({type: ACTIONS.THEME, colors: newColors});
   }

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

@@ -156,6 +156,7 @@ class MoveNoteDialog extends React.Component {
               ...getElevation(DDS.isTab ? 10 : 0),
               width: DDS.isTab ? '65%' : '100%',
               height: DDS.isTab ? '90%' : '100%',
+              flex: 1,
               borderRadius: DDS.isTab ? 5 : 0,
               backgroundColor: colors.bg,
               padding: DDS.isTab ? 8 : 0,

apps/mobile/src/utils/deviceDetection.js

@@ -1,4 +1,5 @@
 import {Dimensions, PixelRatio, Platform} from 'react-native';
+
 const windowSize = Dimensions.get('window');
 
 export class DeviceDetectionService {
@@ -12,6 +13,19 @@ export class DeviceDetectionService {
     this.isPhoneOrTablet();
     this.isIosOrAndroid();
     this.detectIphoneX();
+    this.checkOrientation();
+  }
+
+  checkOrientation() {
+    this.width = Dimensions.get('window').width;
+    this.height = Dimensions.get('window').height;
+    if (this.width < this.height) {
+      this.isTab = false;
+      this.isPhone = true;
+    } else {
+      this.isTab = true;
+      this.isPhone = false;
+    }
   }
 
   isPhoneOrTablet() {

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

@@ -165,7 +165,7 @@ const Editor = ({navigation, noMenu}) => {
       id: id,
     });
 
-    if (id !== rId && note && !note.locked) {
+    if (id !== rId && !note?.locked) {
       id = rId;
       note = db.notes.note(id);
       if (note) {

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

@@ -30,7 +30,7 @@ export const Settings = ({navigation}) => {
 
   function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
     let newColors = setColorScheme(colors, accent);
-    StatusBar.setBarStyle(newColors.night ? 'light-content' : 'dark-content');
+    StatusBar.setBarStyle(colors.night ? 'light-content' : 'dark-content');
 
     dispatch({type: ACTIONS.THEME, colors: newColors});
   }