From c158dd6585f23c443e9c29eabd3741b92b58da4b Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Fri, 26 Nov 2021 11:45:23 +0500
Subject: [PATCH 01/13] fix error when rendering items in premium dialog

---
 apps/mobile/src/components/Announcements/functions.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/mobile/src/components/Announcements/functions.js b/apps/mobile/src/components/Announcements/functions.js
index 7ad010b12..45bd4fdbd 100644
--- a/apps/mobile/src/components/Announcements/functions.js
+++ b/apps/mobile/src/components/Announcements/functions.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import {View} from 'react-native';
 import {allowedPlatforms} from '../../provider/stores';
 import {ProFeatures} from '../ResultDialog/pro-features';
@@ -47,6 +47,7 @@ const renderItems = {
   title: Title,
   description: Description,
   body: Body,
+  text:Body,
   image: Photo,
   list: List,
   subheading: SubHeading,
@@ -55,7 +56,7 @@ const renderItems = {
 };
 
 export const renderItem = ({item, index, color,inline}) => {
-  const Item = renderItems[item.type];
+  const Item = renderItems[item.type] || Fragment
 
   return <Item key={item.text || item.src || item.type} {...item} index={index} color={color} inline={inline} />;
 };

From faa8f3068b3c2d194fcabc944fe88122cd2e616f Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Fri, 26 Nov 2021 12:32:04 +0500
Subject: [PATCH 02/13] fix platform specific items are not filtered

---
 apps/mobile/src/components/Announcements/announcement.js | 2 +-
 apps/mobile/src/components/Announcements/index.js        | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/mobile/src/components/Announcements/announcement.js b/apps/mobile/src/components/Announcements/announcement.js
index 378597431..b86fb0950 100644
--- a/apps/mobile/src/components/Announcements/announcement.js
+++ b/apps/mobile/src/components/Announcements/announcement.js
@@ -49,7 +49,7 @@ export const Announcement = ({color}) => {
               marginTop: 15
             }}
             data={announcement?.body.filter(item =>
-              allowedOnPlatform(item.platform)
+              allowedOnPlatform(item.platforms)
             )}
             renderItem={({item, index}) =>
               renderItem({item: item, index: index, color: colors[color],inline:true})
diff --git a/apps/mobile/src/components/Announcements/index.js b/apps/mobile/src/components/Announcements/index.js
index 4ccf4c705..fcea04618 100644
--- a/apps/mobile/src/components/Announcements/index.js
+++ b/apps/mobile/src/components/Announcements/index.js
@@ -8,7 +8,7 @@ import {
   eOpenAnnouncementDialog
 } from '../../utils/Events';
 import BaseDialog from '../Dialog/base-dialog';
-import {renderItem} from './functions';
+import {allowedOnPlatform, renderItem} from './functions';
 
 export const AnnouncementDialog = () => {
   const [state] = useTracked();
@@ -28,13 +28,12 @@ export const AnnouncementDialog = () => {
 
   const open = data => {
     setInfo(data);
-    console.log(info);
     setVisible(true);
   };
 
   const close = () => {
     if (visible) {
-      remove(info.id);
+     remove(info.id);
       setInfo(null);
       setVisible(false);
     }
@@ -57,7 +56,9 @@ export const AnnouncementDialog = () => {
           style={{
             width: '100%'
           }}
-          data={info?.body}
+          data={info?.body.filter(item =>
+            allowedOnPlatform(item.platforms)
+          )}
           renderItem={renderItem}
         />
 

From 5586ec51297ed5766294788871ff1294b6574932 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Fri, 26 Nov 2021 12:50:16 +0500
Subject: [PATCH 03/13] ensure that products are loaded always

---
 .../src/components/Premium/pricingplans.js    | 19 ++++++++++++++++---
 apps/mobile/src/services/PremiumService.js    |  5 ++++-
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/apps/mobile/src/components/Premium/pricingplans.js b/apps/mobile/src/components/Premium/pricingplans.js
index 38c8d7711..ce4130c24 100644
--- a/apps/mobile/src/components/Premium/pricingplans.js
+++ b/apps/mobile/src/components/Premium/pricingplans.js
@@ -51,10 +51,12 @@ export const PricingPlans = ({
   const [products, setProducts] = useState([]);
   const [offers, setOffers] = useState(null);
   const [buying, setBuying] = useState(false);
+  const [loading, setLoading] = useState(false);
 
   const getSkus = async () => {
     try {
-      let products = PremiumService.getProducts();
+      setLoading(true);
+      let products = await PremiumService.getProducts();
       if (products.length > 0) {
         let offers = {
           monthly: products.find(
@@ -70,13 +72,14 @@ export const PricingPlans = ({
         }
         setProducts(products);
       }
+      setLoading(false);
     } catch (e) {
+      setLoading(false);
       console.log('error getting sku', e);
     }
   };
 
   const getPromo = async productId => {
-    await sleep(500);
     let products = PremiumService.getProducts();
     let product = products.find(p => p.productId === productId);
     if (!product) return;
@@ -140,7 +143,17 @@ export const PricingPlans = ({
     }
   };
 
-  return (
+  return loading ? (
+    <View
+      style={{
+        paddingHorizontal: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: 100
+      }}>
+      <ActivityIndicator color={colors.accent} size={25} />
+    </View>
+  ) : (
     <View
       style={{
         paddingHorizontal: 12
diff --git a/apps/mobile/src/services/PremiumService.js b/apps/mobile/src/services/PremiumService.js
index f2aa2bf41..dcf3b3ab6 100644
--- a/apps/mobile/src/services/PremiumService.js
+++ b/apps/mobile/src/services/PremiumService.js
@@ -65,7 +65,10 @@ function getMontlySub() {
   return _product;
 }
 
-function getProducts() {
+async function getProducts() {
+  if (!products || products.length === 0) {
+     products = await RNIap.getSubscriptions(itemSkus);
+  }
   return products;
 }
 

From e9a90a40c13a7bfb83c6f74426ca870f1242c4fe Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Sat, 27 Nov 2021 11:20:04 +0500
Subject: [PATCH 04/13] fix ux for announcements for logged out users

---
 .../src/components/Announcements/cta.js       |  43 +++--
 .../src/components/Announcements/index.js     |  14 +-
 apps/mobile/src/components/AppLoader/index.js |  19 ++-
 .../src/components/Dialog/BaseDialog.js       |   3 +-
 apps/mobile/src/components/Dialog/index.js    |  19 ++-
 .../src/components/Premium/component.js       |  36 +++--
 .../src/components/Premium/pricingplans.js    | 149 +++++++++++-------
 .../src/components/SimpleList/header.js       |  30 ++--
 apps/mobile/src/provider/stores.ts            |  21 +--
 apps/mobile/src/services/PremiumService.js    |  23 +--
 10 files changed, 205 insertions(+), 152 deletions(-)

diff --git a/apps/mobile/src/components/Announcements/cta.js b/apps/mobile/src/components/Announcements/cta.js
index bd2a10900..d7fa4e8d2 100644
--- a/apps/mobile/src/components/Announcements/cta.js
+++ b/apps/mobile/src/components/Announcements/cta.js
@@ -1,22 +1,21 @@
 import React from 'react';
-import { View } from 'react-native';
-import { useTracked } from '../../provider';
-import { eSendEvent, presentSheet } from '../../services/EventManager';
-import { eCloseAnnouncementDialog, eOpenPremiumDialog } from '../../utils/Events';
-import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import {View} from 'react-native';
+import {useTracked} from '../../provider';
+import {eSendEvent, presentSheet} from '../../services/EventManager';
+import {eCloseAnnouncementDialog} from '../../utils/Events';
+import {openLinkInBrowser} from '../../utils/functions';
+import {SIZE} from '../../utils/SizeUtils';
+import {sleep} from '../../utils/TimeUtils';
 import SettingsBackupAndRestore from '../../views/Settings/backup-restore';
-import { Button } from '../Button';
-import { allowedOnPlatform, getStyle } from './functions';
+import {Button} from '../Button';
+import GeneralSheet from '../GeneralSheet';
+import {PricingPlans} from '../Premium/pricing-plans';
+import {allowedOnPlatform, getStyle} from './functions';
 
-export const Cta = ({actions, style = {}, color,inline}) => {
+export const Cta = ({actions, style = {}, color, inline}) => {
   const [state] = useTracked();
   const colors = state.colors;
-  let buttons =
-    actions.filter(item =>
-      allowedOnPlatform(item.platforms)
-    ) || [];
+  let buttons = actions.filter(item => allowedOnPlatform(item.platforms)) || [];
 
   const onPress = async item => {
     if (!inline) {
@@ -28,9 +27,18 @@ export const Cta = ({actions, style = {}, color,inline}) => {
         await openLinkInBrowser(item.data, colors);
       } catch (e) {}
     } else if (item.type === 'promo') {
-      eSendEvent(eOpenPremiumDialog, {
-        promoCode: item.data,
-        text: item.title
+      presentSheet({
+        component: (
+          <PricingPlans
+            marginTop={1}
+            promo={{
+              promoCode: item.data,
+              text: item.title
+            }}
+          />
+        ),
+        noIcon: true,
+        noProgress: true
       });
     } else if (item.type === 'backup') {
       presentSheet({
@@ -48,6 +56,7 @@ export const Cta = ({actions, style = {}, color,inline}) => {
         paddingHorizontal: 12,
         ...getStyle(style)
       }}>
+      <GeneralSheet context="premium_cta" />
       {buttons.length > 0 &&
         buttons.slice(0, 1).map(item => (
           <Button
diff --git a/apps/mobile/src/components/Announcements/index.js b/apps/mobile/src/components/Announcements/index.js
index fcea04618..0c8fbf344 100644
--- a/apps/mobile/src/components/Announcements/index.js
+++ b/apps/mobile/src/components/Announcements/index.js
@@ -2,6 +2,7 @@ import React, {useEffect, useState} from 'react';
 import {FlatList, View} from 'react-native';
 import {useTracked} from '../../provider';
 import {useMessageStore} from '../../provider/stores';
+import {DDS} from '../../services/DeviceDetection';
 import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
 import {
   eCloseAnnouncementDialog,
@@ -33,7 +34,7 @@ export const AnnouncementDialog = () => {
 
   const close = () => {
     if (visible) {
-     remove(info.id);
+      remove(info.id);
       setInfo(null);
       setVisible(false);
     }
@@ -48,17 +49,18 @@ export const AnnouncementDialog = () => {
       visible={visible}>
       <View
         style={{
-          width: '100%',
+          width: DDS.isTab ? 600 : '100%',
           backgroundColor: colors.bg,
-          maxHeight: '100%'
+          maxHeight: DDS.isTab ? '90%' : '100%',
+          borderRadius: DDS.isTab ? 10 : 0,
+          overflow: 'hidden',
+          marginBottom: DDS.isTab ? 20 : 0
         }}>
         <FlatList
           style={{
             width: '100%'
           }}
-          data={info?.body.filter(item =>
-            allowedOnPlatform(item.platforms)
-          )}
+          data={info?.body.filter(item => allowedOnPlatform(item.platforms))}
           renderItem={renderItem}
         />
 
diff --git a/apps/mobile/src/components/AppLoader/index.js b/apps/mobile/src/components/AppLoader/index.js
index 397819e03..023a22667 100644
--- a/apps/mobile/src/components/AppLoader/index.js
+++ b/apps/mobile/src/components/AppLoader/index.js
@@ -5,6 +5,7 @@ import AnimatedProgress from 'react-native-reanimated-progress-bar';
 import {useTracked} from '../../provider';
 import {
   useFavoriteStore,
+  useMessageStore,
   useNoteStore,
   useSettingStore,
   useUserStore
@@ -23,7 +24,11 @@ import PremiumService from '../../services/PremiumService';
 import {editing} from '../../utils';
 import {COLOR_SCHEME_DARK} from '../../utils/Colors';
 import {db} from '../../utils/database';
-import {eOpenLoginDialog, eOpenRateDialog} from '../../utils/Events';
+import {
+  eOpenAnnouncementDialog,
+  eOpenLoginDialog,
+  eOpenRateDialog
+} from '../../utils/Events';
 import {MMKV} from '../../utils/mmkv';
 import {tabBarRef} from '../../utils/Refs';
 import {SIZE} from '../../utils/SizeUtils';
@@ -51,6 +56,7 @@ const AppLoader = ({onLoad}) => {
   const verifyUser = useUserStore(state => state.verifyUser);
   const setVerifyUser = useUserStore(state => state.setVerifyUser);
   const deviceMode = useSettingStore(state => state.deviceMode);
+  const isIntroCompleted = useSettingStore(state => state.isIntroCompleted);
   const pwdInput = useRef();
 
   const load = async value => {
@@ -86,6 +92,7 @@ const AppLoader = ({onLoad}) => {
           eSendEvent(eOpenLoginDialog, 4);
           return;
         }
+
         let settingsStore = useSettingStore.getState();
         if (await Backup.checkBackupRequired(settingsStore.settings.reminder)) {
           await Backup.checkAndRun();
@@ -93,7 +100,15 @@ const AppLoader = ({onLoad}) => {
         }
         if (await checkForRateAppRequest()) return;
         if (await checkNeedsBackup()) return;
-        PremiumService.getRemainingTrialDaysStatus();
+        if (await PremiumService.getRemainingTrialDaysStatus()) return;
+
+        await useMessageStore.getState().setAnnouncement();
+        if (isIntroCompleted) {
+          let dialogs = useMessageStore.getState().dialogs;
+          if (dialogs.length > 0) {
+            eSendEvent(eOpenAnnouncementDialog, dialogs[0]);
+          }
+        }
       })();
     }
   }, [_loading]);
diff --git a/apps/mobile/src/components/Dialog/BaseDialog.js b/apps/mobile/src/components/Dialog/BaseDialog.js
index e16a9f599..649ea14a2 100644
--- a/apps/mobile/src/components/Dialog/BaseDialog.js
+++ b/apps/mobile/src/components/Dialog/BaseDialog.js
@@ -7,9 +7,8 @@ import {
   StyleSheet,
   TouchableOpacity
 } from 'react-native';
-import {useTracked} from '../../provider';
 import useIsFloatingKeyboard from '../../utils/use-is-floating-keyboard';
-import {BouncingView} from '../ActionSheetComponent/BouncingView';
+import { BouncingView } from '../ActionSheetComponent/BouncingView';
 
 const BaseDialog = ({
   visible,
diff --git a/apps/mobile/src/components/Dialog/index.js b/apps/mobile/src/components/Dialog/index.js
index 13f17303b..286de1c78 100644
--- a/apps/mobile/src/components/Dialog/index.js
+++ b/apps/mobile/src/components/Dialog/index.js
@@ -1,15 +1,14 @@
-import React, {useEffect, useRef, useState} from 'react';
-import {View} from 'react-native';
-import {useTracked} from '../../provider';
-import {DDS} from '../../services/DeviceDetection';
-import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
-import {getElevation} from '../../utils';
-import {eCloseSimpleDialog, eOpenSimpleDialog} from '../../utils/Events';
-import {ph, pv} from '../../utils/SizeUtils';
-import {sleep} from '../../utils/TimeUtils';
+import React, { useEffect, useRef, useState } from 'react';
+import { View } from 'react-native';
+import { useTracked } from '../../provider';
+import { DDS } from '../../services/DeviceDetection';
+import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
+import { getElevation } from '../../utils';
+import { eCloseSimpleDialog, eOpenSimpleDialog } from '../../utils/Events';
+import { sleep } from '../../utils/TimeUtils';
 import Input from '../Input';
 import Seperator from '../Seperator';
-import {Toast} from '../Toast';
+import { Toast } from '../Toast';
 import BaseDialog from './base-dialog';
 import DialogButtons from './dialog-buttons';
 import DialogHeader from './dialog-header';
diff --git a/apps/mobile/src/components/Premium/component.js b/apps/mobile/src/components/Premium/component.js
index d10d1facf..251362f64 100644
--- a/apps/mobile/src/components/Premium/component.js
+++ b/apps/mobile/src/components/Premium/component.js
@@ -1,24 +1,24 @@
-import React, {useState} from 'react';
-import {Image, ScrollView, View} from 'react-native';
-import {LAUNCH_ROCKET} from '../../assets/images/assets';
-import {useTracked} from '../../provider';
-import {useUserStore} from '../../provider/stores';
-import {DDS} from '../../services/DeviceDetection';
-import {eSendEvent, presentSheet} from '../../services/EventManager';
-import {getElevation} from '../../utils';
-import {eOpenLoginDialog} from '../../utils/Events';
-import {SIZE} from '../../utils/SizeUtils';
-import {ActionIcon} from '../ActionIcon';
-import {Button} from '../Button';
+import React, { useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import { LAUNCH_ROCKET } from '../../assets/images/assets';
+import { useTracked } from '../../provider';
+import { useUserStore } from '../../provider/stores';
+import { DDS } from '../../services/DeviceDetection';
+import { eSendEvent, presentSheet } from '../../services/EventManager';
+import { getElevation } from '../../utils';
+import { eOpenLoginDialog } from '../../utils/Events';
+import { SIZE } from '../../utils/SizeUtils';
+import { ActionIcon } from '../ActionIcon';
+import { Button } from '../Button';
 import GeneralSheet from '../GeneralSheet';
-import {SvgToPngView} from '../ListPlaceholders';
+import { SvgToPngView } from '../ListPlaceholders';
 import Seperator from '../Seperator';
-import {Toast} from '../Toast';
+import { Toast } from '../Toast';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
-import {features} from './features';
-import {Group} from './group';
-import {PricingPlans} from './pricing-plans';
+import { features } from './features';
+import { Group } from './group';
+import { PricingPlans } from './pricing-plans';
 
 export const Component = ({close, promo, getRef}) => {
   const [state, dispatch] = useTracked();
@@ -84,6 +84,8 @@ export const Component = ({close, promo, getRef}) => {
         style={{
           paddingHorizontal: DDS.isTab ? DDS.width / 5 : 0
         }}
+        keyboardDismissMode="none"
+        keyboardShouldPersistTaps="always"
         onScroll={onScroll}>
         <View
           style={{
diff --git a/apps/mobile/src/components/Premium/pricingplans.js b/apps/mobile/src/components/Premium/pricingplans.js
index ce4130c24..37f9f8417 100644
--- a/apps/mobile/src/components/Premium/pricingplans.js
+++ b/apps/mobile/src/components/Premium/pricingplans.js
@@ -1,5 +1,5 @@
 import React, {useEffect, useState} from 'react';
-import {ActivityIndicator, Platform, View} from 'react-native';
+import {ActivityIndicator, Platform, Text, View} from 'react-native';
 import * as RNIap from 'react-native-iap';
 import {useTracked} from '../../provider';
 import {useUserStore} from '../../provider/stores';
@@ -13,6 +13,7 @@ import {db} from '../../utils/database';
 import {
   eClosePremiumDialog,
   eCloseProgressDialog,
+  eCloseSimpleDialog,
   eOpenLoginDialog
 } from '../../utils/Events';
 import {openLinkInBrowser} from '../../utils/functions';
@@ -79,28 +80,41 @@ export const PricingPlans = ({
     }
   };
 
-  const getPromo = async productId => {
-    let products = PremiumService.getProducts();
-    let product = products.find(p => p.productId === productId);
-    if (!product) return;
-    let isMonthly = product.productId.indexOf('.mo') > -1;
-    let cycleText = isMonthly
-      ? promoCyclesMonthly[
-          product.introductoryPriceCyclesAndroid ||
-            product.introductoryPriceNumberOfPeriodsIOS
-        ]
-      : promoCyclesYearly[
-          product.introductoryPriceCyclesAndroid ||
-            product.introductoryPriceNumberOfPeriodsIOS
-        ];
+  const getPromo = async code => {
+    try {
+      let productId;
+      if (code.startsWith('com.streetwriters.notesnook')) {
+        productId = code;
+      } else {
+        productId = await db.offers.getCode(code.split(':')[0], Platform.OS);
+      }
 
-    setProduct({
-      type: 'promo',
-      offerType: isMonthly ? 'monthly' : 'yearly',
-      data: product,
-      cycleText: cycleText,
-      info: 'Pay monthly, cancel anytime'
-    });
+      let products = await PremiumService.getProducts();
+      let product = products.find(p => p.productId === productId);
+      if (!product) return false;
+      let isMonthly = product.productId.indexOf('.mo') > -1;
+      let cycleText = isMonthly
+        ? promoCyclesMonthly[
+            product.introductoryPriceCyclesAndroid ||
+              product.introductoryPriceNumberOfPeriodsIOS
+          ]
+        : promoCyclesYearly[
+            product.introductoryPriceCyclesAndroid ||
+              product.introductoryPriceNumberOfPeriodsIOS
+          ];
+
+      setProduct({
+        type: 'promo',
+        offerType: isMonthly ? 'monthly' : 'yearly',
+        data: product,
+        cycleText: cycleText,
+        info: 'Pay monthly, cancel anytime'
+      });
+      return true;
+    } catch (e) {
+      console.log('PROMOCODE ERROR:', code, e);
+      return false;
+    }
   };
 
   useEffect(() => {
@@ -247,23 +261,19 @@ export const PricingPlans = ({
                 positivePress: async value => {
                   if (!value) return;
                   console.log(value);
+                  eSendEvent(eCloseSimpleDialog);
+                  setBuying(true);
                   try {
-                    let productId = await db.offers.getCode(value, Platform.OS);
-                    if (productId) {
-                      getPromo(productId);
-                      ToastEvent.show({
-                        heading: 'Discount applied!',
-                        type: 'success',
-                        context: 'local'
-                      });
-                    } else {
-                      ToastEvent.show({
-                        heading: 'Promo code invalid or expired',
-                        type: 'error',
-                        context: 'local'
-                      });
-                    }
+                    if (!(await getPromo(value)))
+                      throw new Error('Error applying promo code');
+                    ToastEvent.show({
+                      heading: 'Discount applied!',
+                      type: 'success',
+                      context: 'local'
+                    });
+                    setBuying(false);
                   } catch (e) {
+                    setBuying(false);
                     ToastEvent.show({
                       heading: 'Promo code invalid or expired',
                       message: e.message,
@@ -282,32 +292,63 @@ export const PricingPlans = ({
       ) : (
         <View>
           {!user ? (
-            <Button
-              onPress={() => {
-                eSendEvent(eClosePremiumDialog);
-                setTimeout(() => {
-                  eSendEvent(eOpenLoginDialog, 1);
-                }, 400);
-              }}
-              title={'Try free for 14 days'}
-              type="accent"
-              style={{
-                paddingHorizontal: 24,
-                marginTop: 20,
-                marginBottom: 10
-              }}
-            />
+            <>
+              <Button
+                onPress={() => {
+                  eSendEvent(eClosePremiumDialog);
+                  eSendEvent(eCloseProgressDialog);
+                  setTimeout(() => {
+                    eSendEvent(eOpenLoginDialog, 1);
+                  }, 400);
+                }}
+                title={'Try free for 14 days'}
+                type="accent"
+                style={{
+                  paddingHorizontal: 24,
+                  marginTop: 20,
+                  marginBottom: 10
+                }}
+              />
+              {promo &&
+              !promo.promoCode.startsWith('com.streetwriters.notesnook') ? (
+                <Paragraph
+                  size={SIZE.md}
+                  textBreakStrategy="balanced"
+                  style={{
+                    alignSelf: 'center',
+                    justifyContent: 'center',
+                    textAlign: 'center'
+                  }}>
+                  Use promo code{' '}
+                  <Text
+                    style={{
+                      fontFamily: 'OpenSans-SemiBold'
+                    }}>
+                    {promo.promoCode}
+                  </Text>{' '}
+                  at checkout
+                </Paragraph>
+              ) : null}
+            </>
           ) : (
             <>
-              <PricingItem
-                product={product}
+              <Button
                 onPress={() => buySubscription(product.data)}
+                height={40}
+                width="50%"
+                type="accent"
+                title="Subscribe now"
               />
+
               <Button
                 onPress={() => {
                   setProduct(null);
                 }}
+                style={{
+                  marginTop: 5
+                }}
                 height={30}
+                fontSize={13}
                 type="errorShade"
                 title="Cancel promo code"
               />
diff --git a/apps/mobile/src/components/SimpleList/header.js b/apps/mobile/src/components/SimpleList/header.js
index e47047cea..db8f92c3d 100644
--- a/apps/mobile/src/components/SimpleList/header.js
+++ b/apps/mobile/src/components/SimpleList/header.js
@@ -1,17 +1,15 @@
-import React, { useEffect } from 'react';
-import {View} from 'react-native';
-import {useTracked} from '../../provider';
-import {useMessageStore} from '../../provider/stores';
-import {COLORS_NOTE} from '../../utils/Colors';
-import {hexToRGBA} from '../../utils/ColorUtils';
-import {normalize, SIZE} from '../../utils/SizeUtils';
-import {Button} from '../Button';
-import {Placeholder} from '../ListPlaceholders';
+import React from 'react';
+import { View } from 'react-native';
+import { useTracked } from '../../provider';
+import { useMessageStore } from '../../provider/stores';
+import { COLORS_NOTE } from '../../utils/Colors';
+import { hexToRGBA } from '../../utils/ColorUtils';
+import { normalize, SIZE } from '../../utils/SizeUtils';
+import { Announcement } from '../Announcements/announcement';
+import { Button } from '../Button';
+import { Placeholder } from '../ListPlaceholders';
 import Heading from '../Typography/Heading';
-import {Announcement} from '../Announcements/announcement';
-import {Card} from './card';
-import { eSendEvent } from '../../services/EventManager';
-import { eOpenAnnouncementDialog } from '../../utils/Events';
+import { Card } from './card';
 
 export const Header = React.memo(
   ({
@@ -30,13 +28,7 @@ export const Header = React.memo(
     const [state] = useTracked();
     const {colors} = state;
     const announcements = useMessageStore(state => state.announcements);
-    const dialogs = useMessageStore(state => state.dialogs);
 
-    useEffect(() => {
-      if (dialogs.length > 0) {
-        eSendEvent(eOpenAnnouncementDialog,dialogs[0]);
-      }
-    },[dialogs])
     return announcements.length !== 0 && !noAnnouncement ? (
       <Announcement color={color || colors.accent} />
     ) : type === 'search' ? null : !shouldShow ? (
diff --git a/apps/mobile/src/provider/stores.ts b/apps/mobile/src/provider/stores.ts
index 564ccc3ba..a8c4ec291 100644
--- a/apps/mobile/src/provider/stores.ts
+++ b/apps/mobile/src/provider/stores.ts
@@ -364,9 +364,11 @@ export const useMessageStore = create<MessageStore>((set, get) => ({
         announcements = [];
       }
     } catch (e) {
+      console.log("ERROR",e);
       set({announcements: []});
     } finally {
       let all = await getFiltered(announcements);
+      console.log("all", all)
       set({
         announcements: all.filter(a => a.type === 'inline'),
         dialogs: all.filter(a => a.type === 'dialog')
@@ -415,9 +417,7 @@ async function shouldShowAnnouncement(announcement) {
   let show = announcement.platforms.some(
     platform => allowedPlatforms.indexOf(platform) > -1
   );
-
   if (!show) return false;
-
   const subStatus = PremiumService.getUser()?.subscription?.type;
   show = announcement.userTypes.some(userType => {
     switch (userType) {
@@ -428,22 +428,15 @@ async function shouldShowAnnouncement(announcement) {
       case 'trialExpired':
         return subStatus === SUBSCRIPTION_STATUS.BASIC;
       case 'loggedOut':
-        show = !PremiumService.getUser();
-        break;
+        return !PremiumService.getUser();
       case 'verified':
-        show = PremiumService.getUser()?.isEmailVerified;
-        break;
+        return PremiumService.getUser()?.isEmailVerified;
       case 'loggedIn':
-        show = !!PremiumService.getUser();
-        break;
+        return !!PremiumService.getUser();
       case 'unverified':
-        show = !PremiumService.getUser()?.isEmailVerified;
-        break;
+        return !PremiumService.getUser()?.isEmailVerified;
       case 'proExpired':
-        show =
-          subStatus === SUBSCRIPTION_STATUS.PREMIUM_EXPIRED ||
-          subStatus === SUBSCRIPTION_STATUS.PREMIUM_CANCELED;
-        break;
+        return subStatus === SUBSCRIPTION_STATUS.PREMIUM_EXPIRED || subStatus === SUBSCRIPTION_STATUS.PREMIUM_CANCELED;
       case 'any':
       default:
         return true;
diff --git a/apps/mobile/src/services/PremiumService.js b/apps/mobile/src/services/PremiumService.js
index dcf3b3ab6..19d0b8993 100644
--- a/apps/mobile/src/services/PremiumService.js
+++ b/apps/mobile/src/services/PremiumService.js
@@ -1,20 +1,20 @@
-import {CHECK_IDS} from 'notes-core/common';
+import { CHECK_IDS } from 'notes-core/common';
 import React from 'react';
 import * as RNIap from 'react-native-iap';
 import DialogHeader from '../components/Dialog/dialog-header';
-import {CompactFeatures} from '../components/Premium/compact-features';
-import {PricingPlans} from '../components/Premium/pricing-plans';
+import { CompactFeatures } from '../components/Premium/compact-features';
+import { PricingPlans } from '../components/Premium/pricing-plans';
 import Seperator from '../components/Seperator';
-import {useMessageStore, useUserStore} from '../provider/stores';
-import {itemSkus, SUBSCRIPTION_STATUS} from '../utils';
-import {db} from '../utils/database';
+import { useUserStore } from '../provider/stores';
+import { itemSkus, SUBSCRIPTION_STATUS } from '../utils';
+import { db } from '../utils/database';
 import {
   eOpenPremiumDialog,
   eOpenTrialEndingDialog,
   eShowGetPremium
 } from '../utils/Events';
-import {MMKV} from '../utils/mmkv';
-import {eSendEvent, presentSheet, ToastEvent} from './EventManager';
+import { MMKV } from '../utils/mmkv';
+import { eSendEvent, presentSheet, ToastEvent } from './EventManager';
 
 let premiumStatus = 0;
 let products = [];
@@ -39,7 +39,6 @@ async function setPremiumStatus() {
   } catch (e) {
     premiumStatus = 0;
   } finally {
-    useMessageStore.getState().setAnnouncement();
     if (get()) {
       await subscriptions.clear();
     }
@@ -283,7 +282,7 @@ const subscriptions = {
 
 async function getRemainingTrialDaysStatus() {
   let user = await db.user.getUser();
-  if (!user) return;
+  if (!user) return false;
   let premium = user.subscription.type !== SUBSCRIPTION_STATUS.BASIC;
   let isTrial = user.subscription.type === SUBSCRIPTION_STATUS.TRIAL;
   let total = user.subscription.expiry - user.subscription.start;
@@ -299,7 +298,7 @@ async function getRemainingTrialDaysStatus() {
       extend: false
     });
     MMKV.setItem('lastTrialDialogShownAt', 'ending');
-    return;
+    return true;
   }
 
   if (!premium && lastTrialDialogShownAt !== 'expired') {
@@ -309,7 +308,9 @@ async function getRemainingTrialDaysStatus() {
       extend: false
     });
     MMKV.setItem('lastTrialDialogShownAt', 'expired');
+    return true;
   }
+  return false;
 }
 
 const features_list = [

From 0dd2f7af5ff3736992c86a055d07257c991949ea Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Sat, 27 Nov 2021 11:20:47 +0500
Subject: [PATCH 05/13] do not check announcements on launch

---
 apps/mobile/App.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/mobile/App.js b/apps/mobile/App.js
index 49d729960..eab4d10ea 100644
--- a/apps/mobile/App.js
+++ b/apps/mobile/App.js
@@ -112,7 +112,6 @@ const App = () => {
 
   useEffect(() => {
     databaseHasLoaded = false;
-    useMessageStore.getState().setAnnouncement();
     (async () => {
       try {
         await SettingsService.init();

From 743b80642183695f4bec1f8a132fdd9e6ccb7644 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Mon, 29 Nov 2021 11:45:08 +0500
Subject: [PATCH 06/13] handle deleting note properly when editor is open

---
 apps/mobile/src/utils/useAppEvents.js        |  6 +++---
 apps/mobile/src/views/Editor/EditorHeader.js | 21 +++++++++++++++++---
 apps/mobile/src/views/Editor/Functions.js    | 15 +++++++++-----
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/apps/mobile/src/utils/useAppEvents.js b/apps/mobile/src/utils/useAppEvents.js
index a17589edc..35df3fc6f 100644
--- a/apps/mobile/src/utils/useAppEvents.js
+++ b/apps/mobile/src/utils/useAppEvents.js
@@ -112,7 +112,6 @@ export const useAppEvents = () => {
     EV.subscribe(EVENTS.userSessionExpired, onSessionExpired);
     EV.subscribe(EVENTS.userCheckStatus, PremiumService.onUserStatusCheck);
     EV.subscribe(EVENTS.userSubscriptionUpdated, onAccountStatusChange);
-    EV.subscribe(EVENTS.noteRemoved, onNoteRemoved);
     EV.subscribe(EVENTS.mediaAttachmentDownloaded, onMediaDownloaded);
     EV.subscribe(EVENTS.attachmentsLoading, onLoadingAttachment);
 
@@ -133,7 +132,6 @@ export const useAppEvents = () => {
       EV.unsubscribe(EVENTS.databaseSyncRequested, partialSync);
       EV.unsubscribe(EVENTS.userLoggedOut, onLogout);
       EV.unsubscribe(EVENTS.userEmailConfirmed, onEmailVerified);
-      EV.unsubscribe(EVENTS.noteRemoved, onNoteRemoved);
       EV.unsubscribe(EVENTS.mediaAttachmentDownloaded, onMediaDownloaded);
       EV.subscribe(EVENTS.attachmentsLoading, onLoadingAttachment);
       EV.unsubscribe(EVENTS.userCheckStatus, PremiumService.onUserStatusCheck);
@@ -159,7 +157,8 @@ export const useAppEvents = () => {
         Navigation.routeNames.Trash,
         Navigation.routeNames.Notebook
       ]);
-      eSendEvent(eClearEditor);
+       eSendEvent(eClearEditor, id);
+ 
     } catch (e) {}
   };
 
@@ -205,6 +204,7 @@ export const useAppEvents = () => {
     try {
       if (url.startsWith('https://app.notesnook.com/account/verified')) {
         await onEmailVerified();
+      
       } else {
         return;
       }
diff --git a/apps/mobile/src/views/Editor/EditorHeader.js b/apps/mobile/src/views/Editor/EditorHeader.js
index da773b9fe..b98b3bb79 100644
--- a/apps/mobile/src/views/Editor/EditorHeader.js
+++ b/apps/mobile/src/views/Editor/EditorHeader.js
@@ -1,3 +1,4 @@
+import {EV, EVENTS} from 'notes-core/common';
 import React, {useEffect, useRef} from 'react';
 import {
   BackHandler,
@@ -169,12 +170,29 @@ const EditorHeader = () => {
   useEffect(() => {
     eSubscribeEvent(eOnLoadNote, load);
     eSubscribeEvent(eClearEditor, onCallClear);
+    EV.subscribe(EVENTS.noteRemoved, onNoteRemoved);
     return () => {
+      EV.unsubscribe(EVENTS.noteRemoved, onNoteRemoved);
       eUnSubscribeEvent(eClearEditor, onCallClear);
       eUnSubscribeEvent(eOnLoadNote, load);
     };
   }, []);
 
+  const onNoteRemoved = async id => {
+    try {
+      console.log("NOTE REMOVED",id);
+      await db.notes.remove(id);
+      if (id !== getNote().id) return;
+      Navigation.setRoutesToUpdate([
+        Navigation.routeNames.Favorites,
+        Navigation.routeNames.Notes,
+        Navigation.routeNames.NotesPage,
+        Navigation.routeNames.Trash,
+        Navigation.routeNames.Notebook
+      ]);
+    } catch (e) {}
+  };
+
   useEffect(() => {
     if (fullscreen && DDS.isTab) {
       handleBack.current = BackHandler.addEventListener(
@@ -295,7 +313,6 @@ const EditorHeader = () => {
                 color={colors.yellow}
                 customStyle={{
                   marginLeft: 10,
-                  borderRadius: 5
                 }}
                 top={50}
                 onPress={() => {
@@ -313,7 +330,6 @@ const EditorHeader = () => {
                 color={colors.pri}
                 customStyle={{
                   marginLeft: 10,
-                  borderRadius: 5
                 }}
                 top={50}
                 onPress={publishNote}
@@ -326,7 +342,6 @@ const EditorHeader = () => {
                 color={colors.pri}
                 customStyle={{
                   marginLeft: 10,
-                  borderRadius: 5
                 }}
                 top={50}
                 onPress={picker.pick}
diff --git a/apps/mobile/src/views/Editor/Functions.js b/apps/mobile/src/views/Editor/Functions.js
index 6ba957961..e9650ee6b 100644
--- a/apps/mobile/src/views/Editor/Functions.js
+++ b/apps/mobile/src/views/Editor/Functions.js
@@ -261,12 +261,12 @@ export const loadNote = async item => {
     clearNote();
     noteEdited = false;
     if (Platform.OS === 'android') {
-      await sleep(100);
+      await sleep(300);
       textInput.current?.focus();
       EditorWebView.current?.requestFocus();
       tiny.call(EditorWebView, tiny.focusEditor);
     } else {
-      await sleep(50);
+      await sleep(150);
       tiny.call(EditorWebView, tiny.focusEditor);
     }
     if (EDITOR_SETTINGS) {
@@ -351,6 +351,7 @@ export const _onMessage = async evt => {
       eSendEvent('historyEvent', message.value);
       break;
     case 'tiny':
+      console.log(message.value);
       if (message.value === '<br>') return;
       if (message.value !== content.data) {
         if (prevNoteContent && message.value === prevNoteContent) {
@@ -392,7 +393,7 @@ export const _onMessage = async evt => {
       tiny.call(EditorWebView, tiny.notLoading);
       setTimeout(() => {
         eSendEvent('loadingNote');
-      },150);
+      }, 150);
       break;
     case 'premium':
       let user = await db.user.getUser();
@@ -581,6 +582,7 @@ export async function saveNote(preventUpdate) {
   try {
     if (id && !db.notes.note(id)) {
       clearNote();
+      useEditorStore.getState().setCurrentlyEditingNote(null);
       return;
     }
     let locked = false;
@@ -631,8 +633,11 @@ export async function saveNote(preventUpdate) {
       ]);
       let n = db.notes.note(id)?.data?.dateEdited;
       lastEditTime = n + 10;
-      tiny.call(EditorWebView, tiny.updateDateEdited(timeConverter(n)));
-      tiny.call(EditorWebView, tiny.updateSavingState('Saved'));
+      tiny.call(
+        EditorWebView,
+        tiny.updateDateEdited(n ? timeConverter(n) : '')
+      );
+      tiny.call(EditorWebView, tiny.updateSavingState(!n ? '' : 'Saved'));
     }
   } catch (e) {
     console.log('note save error', e, e.stack);

From 1b0b6c1ed6a37008eaec144d2e349a8fd0f2a890 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Mon, 29 Nov 2021 11:55:26 +0500
Subject: [PATCH 07/13] fix tapping in empty editor not focus keyboard

---
 apps/mobile/html/Web.bundle/site/init.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/mobile/html/Web.bundle/site/init.js b/apps/mobile/html/Web.bundle/site/init.js
index a81e7c7a6..3d7dd0b6e 100755
--- a/apps/mobile/html/Web.bundle/site/init.js
+++ b/apps/mobile/html/Web.bundle/site/init.js
@@ -390,11 +390,12 @@ function init_tiny(size) {
         onChange({type: 'paste'});
       });
 
-      editor.on('tap', e => {
-        if (e.target.classList.contains('mce-content-body')) {
-          e.preventDefault();
-        }
-      });
+      if (
+        e.target.classList.contains("mce-content-body") &&
+        !e.target.innerText.length > 0
+      ) {
+        e.preventDefault();
+      }
 
       editor.on('focus', function () {
         reactNativeEventHandler('focus', 'editor');

From c346c9baed0c659506945683408b1fb70cee8626 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Mon, 29 Nov 2021 11:56:03 +0500
Subject: [PATCH 08/13] change editor title to single line

---
 .../android/app/src/main/assets/index.css     |  67 ++-----
 apps/mobile/html/Web.bundle/site/constants.js |  13 +-
 apps/mobile/html/Web.bundle/site/index.css    | 168 ++++++++----------
 apps/mobile/html/Web.bundle/site/index.html   |  12 +-
 apps/mobile/html/Web.bundle/site/listeners.js | 134 ++++++++------
 apps/mobile/src/views/Editor/tiny/tiny.js     |   3 +
 6 files changed, 182 insertions(+), 215 deletions(-)

diff --git a/apps/mobile/android/app/src/main/assets/index.css b/apps/mobile/android/app/src/main/assets/index.css
index 8886696f5..779b91ce0 100644
--- a/apps/mobile/android/app/src/main/assets/index.css
+++ b/apps/mobile/android/app/src/main/assets/index.css
@@ -1,21 +1,22 @@
 body {
   margin: 0px !important;
-  font-family:"Open Sans";
+  font-family: 'Open Sans';
 }
 
 .app-main {
   overflow: visible;
 }
 
-#formBox textarea {
-  font-family: "Open Sans";
+#formBox input {
+  font-family: 'Open Sans';
   font-weight: 600 !important;
   background-color: transparent;
   border: none;
   width: 100%;
   outline: none;
   resize: none;
-  font-size: 32px;
+  font-size: 25px;
+  height: 45x;
 }
 
 #formBox {
@@ -27,47 +28,30 @@ body {
   background-color: transparent;
   padding-left: 12px;
   padding-right: 12px;
-  min-height: 45px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
 }
 #formBox > div,
-#formBox > textarea {
+#formBox > input {
   word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
   box-sizing: border-box;
   width: 100%;
 }
 
-#formBox > textarea {
-  overflow: hidden;
-  position: absolute;
-  height: 100%;
-  padding-top: 4px;
-  padding-bottom: 5px;
-}
-
-#textCopy {
-  font-family: "Open Sans";
-  visibility: hidden;
-  font-weight: 600 !important;
-  font-size: 32px;
-  padding-top: 4px;
-  padding-bottom: 5px;
-}
-
-#formBox > div {
-  min-height: 45px;
+#titlebar input:focus {
+  outline: none;
 }
 
 .info-bar {
-  font-family: "Open Sans";
+  font-family: 'Open Sans';
   color: gray;
-  font-size: 11px;
-  height: 15px;
+  font-size: 11.5px;
+  height: 13px;
   display: flex;
   padding-left: 4px !important;
   justify-content: space-between;
+  margin-top:5px;
 }
 
 .info-bar a {
@@ -75,29 +59,16 @@ body {
   color: gray;
 }
 
-#titlebar textarea:focus {
-  outline: none;
-}
-#infowords {
-  font-family: "Open Sans";
+#infowords,#infodate,#infosaved {
+  font-family: 'Open Sans';
   margin-right: 5px;
   margin-left: 0px;
-  border-radius: 5;
+  border-radius: 5px;
   margin-top: 0;
+  height:16px;
+  padding-top:2.5px;
 }
 
-#infodate {
-  font-family: "Open Sans";
-  margin-right: 5px;
-  margin-left: 5px;
-  margin-top: 0;
-  border-radius: 5;
-}
-
-#infosaved {
-  font-family: "Open Sans";
-  margin-right: 5px;
-  margin-left: 5px;
-  border-radius: 5;
-  margin-top: 0;
+.visible {
+	display: inline-flex !important;
 }
diff --git a/apps/mobile/html/Web.bundle/site/constants.js b/apps/mobile/html/Web.bundle/site/constants.js
index 1e41732cf..d6ac5522e 100755
--- a/apps/mobile/html/Web.bundle/site/constants.js
+++ b/apps/mobile/html/Web.bundle/site/constants.js
@@ -126,13 +126,9 @@ function setTheme() {
   let node = `
 	#titleInput {
 	  color:${pageTheme.colors.heading};
-	  font-size:${32 * pageTheme.colors.factor};
+	  font-size:${25 * pageTheme.colors.factor};
 	}
   
-	#textCopy {
-	  color:${pageTheme.colors.pri};
-	  font-size:${32 * pageTheme.colors.factor};
-	}
 	#titleInput::-webkit-input-placeholder {
 	  color:${pageTheme.colors.icon}
 	}
@@ -140,6 +136,7 @@ function setTheme() {
 	.info-bar {
 	  color:${pageTheme.colors.icon};
 	}
+  
 	  #titlebar {
 		display:flex !important;
 	  }
@@ -225,7 +222,6 @@ function setTheme() {
       background: none !important;
       border-bottom: 1px solid ${pageTheme.colors.nav} !important;
     }`;
-    
 
   let node2 = `
   .mce-content-body table[data-mce-selected], {
@@ -342,9 +338,8 @@ code {
 
 `;
 
-  let editorHead = tinymce.activeEditor.contentDocument.getElementsByTagName(
-    'head'
-  )[0];
+  let editorHead =
+    tinymce.activeEditor.contentDocument.getElementsByTagName('head')[0];
   let css2 = document.createElement('style');
   css2.appendChild(document.createTextNode(node2));
   editorHead.appendChild(css2);
diff --git a/apps/mobile/html/Web.bundle/site/index.css b/apps/mobile/html/Web.bundle/site/index.css
index e3be60f8f..1061feb58 100644
--- a/apps/mobile/html/Web.bundle/site/index.css
+++ b/apps/mobile/html/Web.bundle/site/index.css
@@ -1,102 +1,76 @@
 body {
-	margin:0px !important;
-	overflow: visible;
-	font-family:"Open Sans";
+  margin: 0px !important;
+  font-family: 'Open Sans';
 }
 
-#formBox textarea {
-	font-family: "Open Sans";
-	font-weight: 600 !important;
-	background-color: transparent;
-	border: none;
-	width: 100%;
-	outline: none;
-	resize: none;
-	font-size: 32px;
-  }
-  
-  #formBox {
-	margin-block-end: 0px;
-	position: relative;
-  }
-  
-  #titlebar {
-	background-color: transparent;
-	padding-left: 0px;
-	padding-right: 12px;
-	min-height: 45px;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-  }
-  #formBox > div,
-  #formBox > textarea {
-	word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
-	box-sizing: border-box;
-	width: 100%;
-  }
-  
-  #formBox > textarea {
-	overflow: hidden;
-	position: absolute;
-	height: 100%;
+.app-main {
+  overflow: visible;
+}
 
-	padding-top: 4px;
-    padding-bottom: 5px;
-  }
-  
-  #textCopy {
-	font-family: "Open Sans";
-	font-weight: 600 !important;
-	font-size: 32px;
-	padding-top: 4px;
-    padding-bottom: 5px;
-	padding-right: 0.5em;
-	padding-left: 0.5em;
-  }
-  
-  #formBox > div {
-	min-height: 45px;
-  }
-  
-  .info-bar {
-	font-family: "Open Sans";
-	color: gray;
-	font-size: 11px;
-	height: 15px;
-	display: flex;	
-	padding-left: 14px !important;
-	justify-content: space-between;
-  }
+#formBox input {
+  font-family: 'Open Sans';
+  font-weight: 600 !important;
+  background-color: transparent;
+  border: none;
+  width: 100%;
+  outline: none;
+  resize: none;
+  font-size: 25px;
+  height: 45x;
+}
 
-  .info-bar a {
-	text-decoration: none;
-	color: gray
-  }
-  
-  #titlebar textarea:focus {
-	outline: none;
-  }
-  #infowords {
-	font-family: "Open Sans";
-	margin-right: 5px;
-	margin-left: 0px;
-	border-radius: 5;
-	margin-top: 0;
-  }
-  
-  #infodate {
-	font-family: "Open Sans";
-	margin-right: 5px;
-	margin-left: 5px;
-	margin-top: 0;
-	border-radius: 5;
-  }
-  
-  #infosaved {
-	font-family: "Open Sans";
-	margin-right: 5px;
-	margin-left: 5px;
-	border-radius: 5;
-	margin-top: 0;
-  }
+#formBox {
+  margin-block-end: 0px;
+  position: relative;
+}
+
+#titlebar {
+  background-color: transparent;
+  padding-left: 0px;
+  padding-right: 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+#formBox > div,
+#formBox > input {
+  word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
+  box-sizing: border-box;
+  width: 100%;
+}
+
+#titlebar input:focus {
+  outline: none;
+}
+
+.info-bar {
+  font-family: 'Open Sans';
+  color: gray;
+  font-size: 11.5px;
+  height: 13px;
+  display: flex;
+  padding-left: 4px !important;
+  justify-content: space-between;
+  margin-top: 5px;
+}
+
+.info-bar a {
+  text-decoration: none;
+  color: gray;
+}
+
+#infowords,
+#infodate,
+#infosaved {
+  font-family: 'Open Sans';
+  margin-right: 5px;
+  margin-left: 0px;
+  border-radius: 5px;
+  margin-top: 0;
+  height: 16px;
+  padding-top: 2.5px;
+}
+
+.visible {
+  display: inline-flex !important;
+}
diff --git a/apps/mobile/html/Web.bundle/site/index.html b/apps/mobile/html/Web.bundle/site/index.html
index 16facc194..436fb719f 100644
--- a/apps/mobile/html/Web.bundle/site/index.html
+++ b/apps/mobile/html/Web.bundle/site/index.html
@@ -14,15 +14,15 @@
 		<input id="image-input" accept='image/png, image/gif, image/jpeg, image/bmp, image/x-icon' type="file"
 			name="name" style="display: none;" />
 		<div id="titlebar">
-			<form id="formBox">
-				<textarea maxlength="150" id="titleInput" placeholder="Note title"></textarea>
-				<div id="textCopy"></div>
-			</form>
+			<div id="formBox">
+				<input maxlength="150" id="titleInput"
+					placeholder="Note title"></input>
+			</div>
 			<div class="info-bar">
 				<div style="display:flex;">
 					<p id="infowords"></p>
-					<p id="infodate"></p>
-					<p id="infosaved"></p>
+					<p style="display:none" id="infodate"></p>
+					<p style="display:none" id="infosaved"></p>
 				</div>
 			</div>
 		</div>
diff --git a/apps/mobile/html/Web.bundle/site/listeners.js b/apps/mobile/html/Web.bundle/site/listeners.js
index 28cfbebcb..6a792ece0 100755
--- a/apps/mobile/html/Web.bundle/site/listeners.js
+++ b/apps/mobile/html/Web.bundle/site/listeners.js
@@ -2,38 +2,31 @@ let titleInput = document.getElementById('titleInput');
 let infoBar = '.info-bar';
 let info = null;
 let scrollTimer = null;
+
+function onDomContentLoaded() {
+  document.body.onscroll = function (event) {
+    if (scrollTimer) {
+      clearTimeout(scrollTimer);
+      scrollTimer = null;
+    }
+    updateInfoBar();
+    scrollTimer = setTimeout(function () {
+
+      window.ReactNativeWebView.postMessage(
+        JSON.stringify({
+          visible: event.target.documentElement.scrollTop,
+          title: document.getElementById('titleInput').value,
+          type: 'scroll'
+        })
+      
+      );
+    }, 100);
+  };
+}
+
 function attachTitleInputListeners() {
   infoBar = '.info-bar';
-  document.addEventListener(
-    'DOMContentLoaded',
-    function () {
-      autosize();
-      document.body.onscroll = function (event) {
-        if (scrollTimer) {
-          clearTimeout(scrollTimer);
-          scrollTimer = null;
-        }
-        scrollTimer = setTimeout(function () {
-          window.ReactNativeWebView.postMessage(
-            JSON.stringify({
-              visible: event.target.documentElement.scrollTop,
-              title: document.getElementById('titleInput').value,
-              type: 'scroll'
-            })
-          );
-        }, 100);
-      };
-    },
-    false
-  );
-
-  document.getElementById('formBox').onsubmit = function (evt) {
-    evt.preventDefault();
-    if (tinymce.activeEditor) {
-      tinymce.activeEditor && tinymce.activeEditor.focus();
-    }
-    onTitleChange();
-  };
+  document.addEventListener('DOMContentLoaded', onDomContentLoaded, false);
 
   document.getElementById('titleInput').onkeypress = function (evt) {
     if (evt.keyCode === 13 || evt.which === 13) {
@@ -49,7 +42,6 @@ function attachTitleInputListeners() {
   document
     .getElementById('titleInput')
     .addEventListener('focus', function (evt) {
-      autosize();
       if (window.ReactNativeWebView) {
         window.ReactNativeWebView.postMessage(
           JSON.stringify({
@@ -69,10 +61,10 @@ function attachTitleInputListeners() {
     onTitleChange();
   };
 }
-
+let titleTimeout = 0;
 function onTitleChange() {
-  setTimeout(() => {
-    autosize();
+  clearTimeout(titleTimeout);
+  titleTimeout = setTimeout(() => {
     if (isLoading) {
       return;
     }
@@ -84,7 +76,8 @@ function onTitleChange() {
     info = document.querySelector(infoBar);
     if (tinymce.activeEditor) {
       info.querySelector('#infowords').innerText =
-      editor.countWords() + ' words';
+        editor.countWords() + ' words';
+      updateInfoBar()
     }
 
     if (titleMessage && typeof titleMessage.value === 'string') {
@@ -92,24 +85,51 @@ function onTitleChange() {
         window.ReactNativeWebView.postMessage(JSON.stringify(titleMessage));
       }
     }
-  }, 500);
+  }, 300);
 }
 
 function autosize() {
-  let ele = document.getElementById('textCopy');
-  ele.innerHTML = document
-    .getElementById('titleInput')
-    .value.replace(/\n/g, '<br/>');
-  let newHeight = document.getElementById('titlebar').scrollHeight;
-  let css = document.createElement('style');
-  css.type = 'text/css';
-  let node = `
-      .tox-tinymce {
-        min-height:calc(100vh - ${newHeight}px) !important;
-        };
-   `;
-  css.appendChild(document.createTextNode(node));
-  document.getElementsByTagName('head')[0].appendChild(css);
+  // let ele = document.getElementById('textCopy');
+  // ele.innerHTML = document
+  //   .getElementById('titleInput')
+  //   .value.replace(/\n/g, '<br/>');
+  // let newHeight = document.getElementById('titlebar').scrollHeight;
+  // let css = document.createElement('style');
+  // css.type = 'text/css';
+  // let node = `
+  //     .tox-tinymce {
+  //       min-height:calc(100vh - ${newHeight}px) !important;
+  //       };
+  //  `;
+  // css.appendChild(document.createTextNode(node));
+  // document.getElementsByTagName('head')[0].appendChild(css);
+}
+
+function isInvalidValue(value) {
+  return (
+    value === '' ||
+    value === '<p></p>' ||
+    value === '<p><br></p>' ||
+    value === '<p>&nbsp;</p>'
+  );
+}
+
+function updateInfoBar() {
+  let ids = ['infodate', 'infosaved'];
+  ids.forEach(id => {
+    let element = document.getElementById(id);
+    if (!element) return;
+    if (element.textContent && element.textContent !== '') {
+     if (!element.classList.contains("visible")) {
+        element.classList.add('visible');
+      }
+    } else {
+      if (element.classList.contains("visible")) {
+        element.classList.remove('visible');
+      }
+    
+    }
+  });
 }
 
 function attachMessageListener() {
@@ -118,6 +138,7 @@ function attachMessageListener() {
   if (isSafari) {
     listenerHandler = window;
   }
+
   listenerHandler.addEventListener('message', function (data) {
     let message = JSON.parse(data.data);
     let type = message.type;
@@ -131,7 +152,12 @@ function attachMessageListener() {
         isLoading = true;
         globalThis.isClearingNoteData = false;
         tinymce.activeEditor.mode.set('readonly');
-        tinymce.activeEditor.setContent(value);
+        if (isInvalidValue(value)) {
+          tinymce.activeEditor.setContent('');
+        } else {
+          tinymce.activeEditor.setContent(value);
+        }
+
         setTimeout(function () {
           document.activeElement.blur();
           window.blur();
@@ -141,7 +167,8 @@ function attachMessageListener() {
         }, 300);
         info = document.querySelector(infoBar);
         info.querySelector('#infowords').innerText =
-        editor.countWords() + ' words';
+          editor.countWords() + ' words';
+          updateInfoBar()
         break;
       case 'htmldiff':
         document.getElementsByClassName('htmldiff_div')[0].innerHTML = value;
@@ -155,9 +182,6 @@ function attachMessageListener() {
         break;
       case 'title':
         document.getElementById('titleInput').value = value;
-        setTimeout(function () {
-          autosize();
-        }, 100);
         break;
       default:
         break;
diff --git a/apps/mobile/src/views/Editor/tiny/tiny.js b/apps/mobile/src/views/Editor/tiny/tiny.js
index 30ff7471a..a3222e41d 100644
--- a/apps/mobile/src/views/Editor/tiny/tiny.js
+++ b/apps/mobile/src/views/Editor/tiny/tiny.js
@@ -14,6 +14,7 @@ info = document.querySelector(infoBar);
 info.querySelector('#infosaved').innerText = "";
 info.querySelector('#infodate').innerText = "";
 info.querySelector('#infowords').innerText = ""
+updateInfoBar()
 document.activeElement.blur();
 window.blur();
 `;
@@ -72,6 +73,7 @@ const updateDateEdited = value => `
 	(function() {
 		info = document.querySelector(infoBar);
         info.querySelector('#infodate').innerText = "${value}";
+        updateInfoBar()
 	})();
 `;
 
@@ -79,6 +81,7 @@ const updateSavingState = value => `
 	(function() {
 		info = document.querySelector(infoBar);
     info.querySelector('#infosaved').innerText = "${value}";
+    updateInfoBar()
 	})();
 `;
 

From 168c7855b1d0d2d613cc725a63f3f1ba78f399ea Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Mon, 29 Nov 2021 13:57:49 +0500
Subject: [PATCH 09/13] fix note loading in editor

---
 apps/mobile/html/Web.bundle/site/init.js      | 208 +++++++++---------
 apps/mobile/src/views/Editor/EditorOverlay.js |   1 -
 apps/mobile/src/views/Editor/Functions.js     | 102 ++++-----
 3 files changed, 156 insertions(+), 155 deletions(-)

diff --git a/apps/mobile/html/Web.bundle/site/init.js b/apps/mobile/html/Web.bundle/site/init.js
index 3d7dd0b6e..8a49b3667 100755
--- a/apps/mobile/html/Web.bundle/site/init.js
+++ b/apps/mobile/html/Web.bundle/site/init.js
@@ -263,6 +263,109 @@ function init_tiny(size) {
         console.error(e);
       }
     },
+    init_instance_callback: function (_editor) {
+      editor = _editor;
+      setTheme();
+
+      editor.on('SelectionChange', function (e) {
+        selectchange();
+      });
+
+      editor.on('ClearUndos', onUndoChange);
+      editor.on('Undo', onUndoChange);
+      editor.on('Redo', onUndoChange);
+      editor.on('TypingUndos', onUndoChange);
+      editor.on('BeforeAddUndo', onUndoChange);
+      editor.on('AddUndo', onUndoChange);
+      editor.on('cut', function () {
+        onChange({type: 'cut'});
+        onUndoChange();
+      });
+      editor.on('copy', onUndoChange);
+      editor.on('paste', function () {
+        onChange({type: 'paste'});
+      });
+
+      editor.on('focus', function () {
+        reactNativeEventHandler('focus', 'editor');
+      });
+
+      editor.on('SetContent', function (event) {
+        console.log('content set', event.paste, globalThis.isClearingNoteData);
+        if (globalThis.isClearingNoteData) {
+          globalThis.isClearingNoteData = false;
+          return;
+        }
+        setTimeout(function () {
+          editor.undoManager.transact(function () {});
+        }, 1000);
+        if (!event.paste) {
+          reactNativeEventHandler('noteLoaded', true);
+        }
+        if (event.paste) {
+          isLoading = false;
+          onChange(event);
+        }
+      });
+
+      editor.on('NewBlock', function (e) {
+        console.log('New Block');
+        const {newBlock} = e;
+        let target;
+        if (newBlock) {
+          target = newBlock.previousElementSibling;
+        }
+        if (target && target.classList.contains(COLLAPSED_KEY)) {
+          target.classList.remove(COLLAPSED_KEY);
+          collapseElement(target);
+        }
+      });
+
+      editor.on('touchstart mousedown', function (e) {
+        const {target} = e;
+        if (
+          e.offsetX < 6 &&
+          collapsibleTags[target.tagName] &&
+          target.parentElement &&
+          target.parentElement.tagName === 'BODY'
+        ) {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          e.stopPropagation();
+          editor.undoManager.transact(function () {
+            if (target.classList.contains(COLLAPSED_KEY)) {
+              target.classList.remove(COLLAPSED_KEY);
+            } else {
+              target.classList.add(COLLAPSED_KEY);
+            }
+            collapseElement(target);
+            editor.getHTML().then(function (html) {
+              reactNativeEventHandler('tiny', html);
+            });
+          });
+        }
+      });
+
+      editor.on('tap', function (e) {
+        if (
+          e.target.classList.contains('mce-content-body') &&
+          !e.target.innerText.length > 0
+        ) {
+          e.preventDefault();
+        }
+      });
+      editor.on('ScrollIntoView', function (e) {
+        e.preventDefault();
+        e.elm.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest'
+        });
+      });
+      editor.on('input', onChange);
+      editor.on('keyup', onChange);
+      editor.on('NodeChange', onChange);
+      editor.on('compositionend', onChange);
+    },
     setup: function (_editor) {
       editor = _editor;
       editor.ui.registry.addButton('deleteimage', {
@@ -281,9 +384,7 @@ function init_tiny(size) {
       });
 
       editor.on('init', function (e) {
-        setTimeout(function () {
-          reactNativeEventHandler('status', true);
-        }, 300);
+       reactNativeEventHandler('status', true);
       });
 
       editor.ui.registry.addButton('deletevideo', {
@@ -366,107 +467,6 @@ function init_tiny(size) {
         },
         onclick: function () {}
       });
-    },
-    init_instance_callback: function (_editor) {
-      editor = _editor;
-      setTheme();
-
-      editor.on('SelectionChange', function (e) {
-        selectchange();
-      });
-
-      editor.on('ClearUndos', onUndoChange);
-      editor.on('Undo', onUndoChange);
-      editor.on('Redo', onUndoChange);
-      editor.on('TypingUndos', onUndoChange);
-      editor.on('BeforeAddUndo', onUndoChange);
-      editor.on('AddUndo', onUndoChange);
-      editor.on('cut', function () {
-        onChange({type: 'cut'});
-        onUndoChange();
-      });
-      editor.on('copy', onUndoChange);
-      editor.on('paste', function () {
-        onChange({type: 'paste'});
-      });
-
-      if (
-        e.target.classList.contains("mce-content-body") &&
-        !e.target.innerText.length > 0
-      ) {
-        e.preventDefault();
-      }
-
-      editor.on('focus', function () {
-        reactNativeEventHandler('focus', 'editor');
-      });
-
-      editor.on('SetContent', function (event) {
-        if (globalThis.isClearingNoteData) {
-          globalThis.isClearingNoteData = false;
-          return;
-        }
-        setTimeout(function() {
-          editor.undoManager.transact(function () {});
-        },1000);
-        if (!event.paste) {
-          reactNativeEventHandler('noteLoaded', true);
-        }
-        if (event.paste) {
-          isLoading = false;
-          onChange(event);
-        }
-      });
-
-      editor.on('NewBlock', function (e) {
-        console.log('New Block');
-        const {newBlock} = e;
-        let target;
-        if (newBlock) {
-          target = newBlock.previousElementSibling;
-        }
-        if (target && target.classList.contains(COLLAPSED_KEY)) {
-          target.classList.remove(COLLAPSED_KEY);
-          collapseElement(target);
-        }
-      });
-
-      editor.on('touchstart mousedown', function (e) {
-        const {target} = e;
-        if (
-          e.offsetX < 6 &&
-          collapsibleTags[target.tagName] &&
-          target.parentElement &&
-          target.parentElement.tagName === 'BODY'
-        ) {
-          e.preventDefault();
-          e.stopImmediatePropagation();
-          e.stopPropagation();
-          editor.undoManager.transact(function () {
-            if (target.classList.contains(COLLAPSED_KEY)) {
-              target.classList.remove(COLLAPSED_KEY);
-            } else {
-              target.classList.add(COLLAPSED_KEY);
-            }
-            collapseElement(target);
-            editor.getHTML().then(function (html) {
-              reactNativeEventHandler('tiny', html);
-            });
-          });
-        }
-      });
-
-      editor.on('ScrollIntoView', function (e) {
-        e.preventDefault();
-        e.elm.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest'
-        });
-      });
-      editor.on('input', onChange);
-      editor.on('keyup', onChange);
-      editor.on('NodeChange', onChange);
-      editor.on('compositionend', onChange);
     }
   });
 }
diff --git a/apps/mobile/src/views/Editor/EditorOverlay.js b/apps/mobile/src/views/Editor/EditorOverlay.js
index 8919c9313..840c1a95a 100644
--- a/apps/mobile/src/views/Editor/EditorOverlay.js
+++ b/apps/mobile/src/views/Editor/EditorOverlay.js
@@ -44,7 +44,6 @@ const EditorOverlay = () => {
         easing: Easing.in(Easing.ease)
       }).start();
       timerClosing = setTimeout(() => {
-        console.log('clearing now');
         opacity.setValue(1);
         setLoading(null);
       }, 150);
diff --git a/apps/mobile/src/views/Editor/Functions.js b/apps/mobile/src/views/Editor/Functions.js
index e9650ee6b..1bd5e26c2 100644
--- a/apps/mobile/src/views/Editor/Functions.js
+++ b/apps/mobile/src/views/Editor/Functions.js
@@ -1,8 +1,8 @@
-import {createRef} from 'react';
-import {Platform} from 'react-native';
-import {presentDialog} from '../../components/Dialog/functions';
-import {useEditorStore, useMenuStore} from '../../provider/stores';
-import {DDS} from '../../services/DeviceDetection';
+import { createRef } from 'react';
+import { Platform } from 'react-native';
+import { presentDialog } from '../../components/Dialog/functions';
+import { useEditorStore, useMenuStore } from '../../provider/stores';
+import { DDS } from '../../services/DeviceDetection';
 import {
   eSendEvent,
   eSubscribeEvent,
@@ -10,24 +10,23 @@ import {
 } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import PremiumService from '../../services/PremiumService';
-import {editing} from '../../utils';
-import {COLORS_NOTE, COLOR_SCHEME} from '../../utils/Colors';
-import {hexToRGBA} from '../../utils/ColorUtils';
-import {db} from '../../utils/database';
+import { editing } from '../../utils';
+import { COLORS_NOTE, COLOR_SCHEME } from '../../utils/Colors';
+import { hexToRGBA } from '../../utils/ColorUtils';
+import { db } from '../../utils/database';
 import {
   eOnLoadNote,
   eShowGetPremium,
   eShowMergeDialog
 } from '../../utils/Events';
 import filesystem from '../../utils/filesystem';
-import {openLinkInBrowser} from '../../utils/functions';
-import {MMKV} from '../../utils/mmkv';
-import {tabBarRef} from '../../utils/Refs';
-import {normalize} from '../../utils/SizeUtils';
-import {sleep, timeConverter} from '../../utils/TimeUtils';
+import { openLinkInBrowser } from '../../utils/functions';
+import { MMKV } from '../../utils/mmkv';
+import { tabBarRef } from '../../utils/Refs';
+import { normalize } from '../../utils/SizeUtils';
+import { sleep, timeConverter } from '../../utils/TimeUtils';
 import tiny from './tiny/tiny';
-import {IMAGE_TOOLTIP_CONFIG} from './tiny/toolbar/config';
-import {parse} from 'node-html-parser';
+import { IMAGE_TOOLTIP_CONFIG } from './tiny/toolbar/config';
 
 export let EditorWebView = createRef();
 export const editorTitleInput = createRef();
@@ -59,6 +58,7 @@ let disableSaving = false;
 let isSaving = false;
 let waitForContent = false;
 let prevNoteContent = null;
+let timerForEditor = null;
 
 export function startClosingSession() {
   closingSession = true;
@@ -234,7 +234,6 @@ function clearNote() {
     type: 'tiny'
   };
 }
-
 export const loadNote = async item => {
   console.log('.....OPEN NOTE.....');
   editing.currentlyEditing = true;
@@ -281,6 +280,7 @@ export const loadNote = async item => {
     if (!webviewInit) {
       EditorWebView.current?.reload();
     }
+
     tiny.call(EditorWebView, tiny.notLoading);
     checkStatus();
   } else {
@@ -651,6 +651,7 @@ export async function onWebViewLoad(premium, colors) {
   } else {
     tiny.call(EditorWebView, tiny.removeMarkdown, true);
   }
+
   if (getNote()?.id) {
     loadNoteInEditor();
   }
@@ -701,17 +702,18 @@ export const presentResolveConflictDialog = _note => {
 };
 
 const loadNoteInEditor = async (keepHistory = true) => {
-  console.log('loading note', id, webviewInit);
+  clearTimeout(timerForEditor);
+  timerForEditor = setTimeout(async () => {
+    if (!webviewInit) return;
 
-  if (!webviewInit) return;
-  saveCounter = 0;
-  if (note?.id) {
-    post('title', title);
-    intent = false;
-    if (!content || !content.data || content?.data?.length === 0) {
-      tiny.call(
-        EditorWebView,
-        `
+    console.log('loading note', id, webviewInit);
+    if (note?.id) {
+      post('title', title);
+      intent = false;
+      if (!content || !content.data || content?.data?.length === 0) {
+        tiny.call(
+          EditorWebView,
+          `
     globalThis.isClearingNoteData = false;
     window.ReactNativeWebView.postMessage(
       JSON.stringify({
@@ -720,30 +722,30 @@ const loadNoteInEditor = async (keepHistory = true) => {
       }),
     );
     `
-      );
-    } else {
-      console.log('opening in editor');
-      post('html', content.data);
-    }
-    if (id) {
-      db.attachments.downloadImages(id);
-    }
+        );
+      } else {
+        console.log('opening in editor', content.data);
+        post('html', content.data);
+      }
+      if (id) {
+        db.attachments.downloadImages(id);
+      }
 
-    setColors();
-    tiny.call(
-      EditorWebView,
-      tiny.updateDateEdited(timeConverter(note.dateEdited))
-    );
-    tiny.call(EditorWebView, tiny.updateSavingState('Saved'));
-  } else {
-    await restoreEditorState();
-  }
-  await sleep(500);
-  loadingNote = null;
-  disableSaving = false;
-  if (keepHistory) {
-    tiny.call(EditorWebView, tiny.clearHistory);
-  }
+      setColors();
+      tiny.call(
+        EditorWebView,
+        tiny.updateDateEdited(timeConverter(note.dateEdited))
+      );
+      tiny.call(EditorWebView, tiny.updateSavingState('Saved'));
+    } else {
+      await restoreEditorState();
+    }
+    loadingNote = null;
+    disableSaving = false;
+    if (keepHistory) {
+      tiny.call(EditorWebView, tiny.clearHistory);
+    }
+  }, 50);
 };
 
 export async function updateNoteInEditor() {

From fe03fab5ddc765dfc5d64f5d097ce1ccca3f3244 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Tue, 30 Nov 2021 13:28:57 +0500
Subject: [PATCH 10/13] show notebook > topic on note items

---
 apps/mobile/src/components/NoteItem/index.js | 97 +++++++++++---------
 1 file changed, 52 insertions(+), 45 deletions(-)

diff --git a/apps/mobile/src/components/NoteItem/index.js b/apps/mobile/src/components/NoteItem/index.js
index 6ce5fdafa..5942d9eb6 100644
--- a/apps/mobile/src/components/NoteItem/index.js
+++ b/apps/mobile/src/components/NoteItem/index.js
@@ -16,23 +16,17 @@ import {TimeSince} from '../Menu/TimeSince';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
-function navigateToNotebook(item) {
-  let notebook = item;
-  let routeName = 'Notebook';
-  let params = {
-    menu: false,
-    notebook: notebook,
-    title: notebook.title
-  };
-
+const navigateToTopic = topic => {
+  let routeName = 'NotesPage';
+  let params = {...topic, menu: false, get: 'topics'};
   let headerState = {
-    heading: notebook.title,
-    id: notebook.id,
-    type: notebook.type
+    heading: topic.title,
+    id: topic.id,
+    type: topic.type
   };
-  eSendEvent(eOnNewTopicAdded, params);
+  eSendEvent(refreshNotesPage, params);
   Navigation.navigate(routeName, params, headerState);
-}
+};
 
 function navigateToTag(item) {
   let tags = db.tags.all;
@@ -84,6 +78,26 @@ const NoteItem = ({item, isTrash, tags}) => {
   const compactMode = settings.notesListMode === 'compact';
   const allTags = useTagStore(state => state.tags);
 
+  function getNotebook() {
+    if (isTrash || !item.notebooks) return [];
+    let item_notebook = item.notebooks?.slice(0, 1)[0];
+
+    notebook = db.notebooks.notebook(item_notebook.id);
+
+    if (!notebook) return [];
+    let topic = notebook.topics.topic(item_notebook.topics[0])?._topic;
+
+    notebook = notebook.data;
+
+    return [
+      {
+        title: `${notebook?.title} › ${topic?.title}`,
+        notebook: notebook,
+        topic: topic
+      }
+    ];
+  }
+
   return (
     <>
       <View
@@ -99,37 +113,30 @@ const NoteItem = ({item, isTrash, tags}) => {
               zIndex: 10,
               elevation: 10
             }}>
-            {!isTrash && item.notebooks
-              ? item.notebooks?.slice(0, 1)?.map(_item => {
-                  let notebook = db.notebooks.notebook(_item.id);
-                  notebook = notebook?.data;
-
-                  return notebook ? (
-                    <Button
-                      title={notebook.title}
-                      key={_item}
-                      height={20}
-                      icon="book-outline"
-                      type="grayBg"
-                      fontSize={SIZE.xs + 1}
-                      iconSize={SIZE.sm}
-                      textStyle={{
-                        marginRight: 0,
-                        fontWeight: 'normal',
-                        fontFamily: null
-                      }}
-                      style={{
-                        borderRadius: 5,
-                        marginRight: 5,
-                        borderWidth: 0.5,
-                        borderColor: colors.icon,
-                        paddingHorizontal: 6
-                      }}
-                      onPress={() => navigateToNotebook(notebook)}
-                    />
-                  ) : null;
-                })
-              : null}
+            {getNotebook().map(_item => (
+              <Button
+                title={_item.title}
+                key={_item}
+                height={20}
+                icon="book-outline"
+                type="grayBg"
+                fontSize={SIZE.xs + 1}
+                iconSize={SIZE.sm}
+                textStyle={{
+                  marginRight: 0,
+                  fontWeight: 'normal',
+                  fontFamily: null
+                }}
+                style={{
+                  borderRadius: 5,
+                  marginRight: 5,
+                  borderWidth: 0.5,
+                  borderColor: colors.icon,
+                  paddingHorizontal: 6
+                }}
+                onPress={() => navigateToTopic(_item.topic)}
+              />
+            ))}
             {!isTrash && tags
               ? tags.slice(0, 2)?.map(item => (
                   <Button

From a28eebf28ccdee02ef3961c8c7d8384b153f9709 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Tue, 30 Nov 2021 13:29:33 +0500
Subject: [PATCH 11/13] add new header for notebook screen & topic

---
 .../src/components/AddNotebookDialog/index.js |   5 +
 apps/mobile/src/components/Header/index.js    |   3 +-
 apps/mobile/src/components/Header/title.js    |  81 ++++++++--
 .../components/SelectionWrapper/backfill.js   |   9 +-
 .../src/components/SelectionWrapper/index.js  |  19 ++-
 .../mobile/src/components/SimpleList/index.js |  29 ++--
 .../components/SimpleList/notebookheader.js   | 147 ++++++++++++++++++
 apps/mobile/src/utils/database.js             |  18 +--
 apps/mobile/src/views/Editor/EditorHeader.js  |  15 +-
 .../src/views/Editor/tiny/toolbar/config.js   |   5 +-
 apps/mobile/src/views/Notebook/index.js       |  20 ++-
 apps/mobile/src/views/Notes/index.js          |  10 +-
 12 files changed, 292 insertions(+), 69 deletions(-)
 create mode 100644 apps/mobile/src/components/SimpleList/notebookheader.js

diff --git a/apps/mobile/src/components/AddNotebookDialog/index.js b/apps/mobile/src/components/AddNotebookDialog/index.js
index 4d7ba17aa..127ec3443 100644
--- a/apps/mobile/src/components/AddNotebookDialog/index.js
+++ b/apps/mobile/src/components/AddNotebookDialog/index.js
@@ -400,6 +400,11 @@ export class AddNotebookDialog extends React.Component {
             type="accent"
             onPress={this.addNewNotebook}
           />
+          <View
+          style={{
+            height:35
+          }}
+          />
         </View>
 
         <Toast context="local" />
diff --git a/apps/mobile/src/components/Header/index.js b/apps/mobile/src/components/Header/index.js
index dba5a97ea..b3d6167ea 100644
--- a/apps/mobile/src/components/Header/index.js
+++ b/apps/mobile/src/components/Header/index.js
@@ -12,7 +12,7 @@ import {HeaderRightMenu} from './HeaderRightMenu';
 import {Title} from './title';
 
 export const Header = React.memo(
-  ({root, title, screen, isBack, color, action, rightButtons}) => {
+  ({root, title, screen, isBack, color, action, rightButtons,notebook}) => {
     const [state] = useTracked();
     const {colors} = state;
     const insets = useSafeAreaInsets();
@@ -52,6 +52,7 @@ export const Header = React.memo(
 
           {screen !== 'Search' ? (
             <Title
+              notebook={notebook}
               headerColor={color}
               heading={title}
               screen={screen}
diff --git a/apps/mobile/src/components/Header/title.js b/apps/mobile/src/components/Header/title.js
index 7206e3bd0..72b8659e2 100644
--- a/apps/mobile/src/components/Header/title.js
+++ b/apps/mobile/src/components/Header/title.js
@@ -1,12 +1,57 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {View} from 'react-native';
 import {useTracked} from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
+import {
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent
+} from '../../services/EventManager';
+import Navigation from '../../services/Navigation';
+import {eOnNewTopicAdded, eScrollEvent} from '../../utils/Events';
+import {SIZE} from '../../utils/SizeUtils';
 import Heading from '../Typography/Heading';
+import Paragraph from '../Typography/Paragraph';
 
-export const Title = ({heading, headerColor}) => {
+export const Title = ({heading, headerColor, screen, notebook}) => {
   const [state] = useTracked();
   const {colors} = state;
+  const [hide, setHide] = useState(screen === 'Notebook' ? true : false);
+
+  const onScroll = data => {
+    if (screen !== 'Notebook') {
+      setHide(false);
+      return;
+    }
+    if (data.y > 150) {
+      setHide(false);
+    } else {
+      setHide(true);
+    }
+  };
+
+  useEffect(() => {
+    eSubscribeEvent(eScrollEvent, onScroll);
+    return () => {
+      eUnSubscribeEvent(eScrollEvent, onScroll);
+    };
+  }, []);
+
+  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);
+  }
 
   return (
     <View
@@ -15,17 +60,27 @@ export const Title = ({heading, headerColor}) => {
         flexShrink: 1,
         flexDirection: 'row'
       }}>
-      <Heading
-        numberOfLines={1}
-        style={{
-          flexWrap: 'wrap'
-        }}
-        color={headerColor}>
-        <Heading color={colors.accent}>
-          {heading.slice(0, 1) === '#' ? '#' : null}
+      {!hide ? (
+        <Heading
+          onPress={navigateToNotebook}
+          numberOfLines={notebook ? 2 : 1}
+          size={notebook ? SIZE.md + 2 : SIZE.xl}
+          style={{
+            flexWrap: 'wrap'
+          }}
+          color={headerColor}>
+          {notebook && (
+            <Paragraph numberOfLines={1} size={SIZE.xs + 2}>
+              {notebook?.title}
+              {'\n'}
+            </Paragraph>
+          )}
+          <Heading color={colors.accent}>
+            {heading.slice(0, 1) === '#' ? '#' : null}
+          </Heading>
+          {heading.slice(0, 1) === '#' ? heading.slice(1) : heading}
         </Heading>
-        {heading.slice(0, 1) === '#' ? heading.slice(1) : heading}
-      </Heading>
+      ) : null}
     </View>
   );
 };
diff --git a/apps/mobile/src/components/SelectionWrapper/backfill.js b/apps/mobile/src/components/SelectionWrapper/backfill.js
index 0513f13b5..80369b65a 100644
--- a/apps/mobile/src/components/SelectionWrapper/backfill.js
+++ b/apps/mobile/src/components/SelectionWrapper/backfill.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import {View} from 'react-native';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {useTracked} from '../../provider';
+import { View } from 'react-native';
+import { useTracked } from '../../provider';
 import { useEditorStore } from '../../provider/stores';
-import {hexToRGBA} from '../../utils/ColorUtils';
-import {SIZE} from '../../utils/SizeUtils';
-import Heading from '../Typography/Heading';
+import { hexToRGBA } from '../../utils/ColorUtils';
 
 export const Filler = ({item, background}) => {
   const [state] = useTracked();
diff --git a/apps/mobile/src/components/SelectionWrapper/index.js b/apps/mobile/src/components/SelectionWrapper/index.js
index e7adff2f5..8b710c4da 100644
--- a/apps/mobile/src/components/SelectionWrapper/index.js
+++ b/apps/mobile/src/components/SelectionWrapper/index.js
@@ -1,13 +1,12 @@
-import React, {useEffect, useState} from 'react';
-import {useWindowDimensions} from 'react-native';
-import {useTracked} from '../../provider';
+import React, { useEffect, useState } from 'react';
+import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
-import {eSubscribeEvent, eUnSubscribeEvent} from '../../services/EventManager';
-import {history} from '../../utils';
-import {PressableButton} from '../PressableButton';
-import {ActionStrip} from './action-strip';
-import {Filler} from './back-fill';
-import {SelectionIcon} from './selection';
+import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
+import { history } from '../../utils';
+import { PressableButton } from '../PressableButton';
+import { ActionStrip } from './action-strip';
+import { Filler } from './back-fill';
+import { SelectionIcon } from './selection';
 
 const SelectionWrapper = ({
   children,
@@ -55,7 +54,7 @@ const SelectionWrapper = ({
       testID={testID}
       onLongPress={_onLongPress}
       onPress={_onPress}
-      customSelectedColor={colors.nav}
+      customSelectedColor={colors.transGray}
       customAlpha={!colors.night ? -0.02 : 0.02}
       customOpacity={1}
       customStyle={{
diff --git a/apps/mobile/src/components/SimpleList/index.js b/apps/mobile/src/components/SimpleList/index.js
index 44b763969..b327fdc19 100644
--- a/apps/mobile/src/components/SimpleList/index.js
+++ b/apps/mobile/src/components/SimpleList/index.js
@@ -41,7 +41,8 @@ const SimpleList = ({
   headerProps = {
     heading: 'Home'
   },
-  screen
+  screen,
+  ListHeader
 }) => {
   const [state] = useTracked();
   const {colors} = state;
@@ -103,10 +104,10 @@ const SimpleList = ({
 
   let styles = {
     height: '100%',
-    backgroundColor: colors.bg,
     width: '100%',
     minHeight: 1,
-    minWidth: 1
+    minWidth: 1,
+    backgroundColor:colors.bg
   };
 
   const _keyExtractor = item => item.id || item.title;
@@ -147,15 +148,19 @@ const SimpleList = ({
         ListFooterComponent={<Footer />}
         ListHeaderComponent={
           <>
-            <Header
-              title={headerProps.heading}
-              paragraph={headerProps.paragraph}
-              onPress={headerProps.onPress}
-              icon={headerProps.icon}
-              color={headerProps.color}
-              type={type}
-              screen={screen}
-            />
+            {ListHeader ? (
+              ListHeader
+            ) : (
+              <Header
+                title={headerProps.heading}
+                paragraph={headerProps.paragraph}
+                onPress={headerProps.onPress}
+                icon={headerProps.icon}
+                color={headerProps.color}
+                type={type}
+                screen={screen}
+              />
+            )}
           </>
         }
       />
diff --git a/apps/mobile/src/components/SimpleList/notebookheader.js b/apps/mobile/src/components/SimpleList/notebookheader.js
new file mode 100644
index 000000000..e74efef24
--- /dev/null
+++ b/apps/mobile/src/components/SimpleList/notebookheader.js
@@ -0,0 +1,147 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import {useTracked} from '../../provider';
+import {useMenuStore} from '../../provider/stores';
+import {ToastEvent} from '../../services/EventManager';
+import {db} from '../../utils/database';
+import {SIZE} from '../../utils/SizeUtils';
+import {ActionIcon} from '../ActionIcon';
+import {Button} from '../Button';
+import Heading from '../Typography/Heading';
+import Paragraph from '../Typography/Paragraph';
+
+export const NotebookHeader = ({notebook, onPress, onEditNotebook}) => {
+  const [state] = useTracked();
+  const {colors} = state;
+  const [isPinnedToMenu, setIsPinnedToMenu] = useState(
+    db.settings.isPinned(notebook.id)
+  );
+  const setMenuPins = useMenuStore(state => state.setMenuPins);
+
+  const onPinNotebook = async () => {
+    try {
+      if (isPinnedToMenu) {
+        await db.settings.unpin(notebook.id);
+      } else {
+        await db.settings.pin(notebook.type, {id: notebook.id});
+        ToastEvent.show({
+          heading: 'Shortcut created',
+          type: 'success'
+        });
+      }
+      setIsPinnedToMenu(db.settings.isPinned(notebook.id));
+      setMenuPins();
+    } catch (e) {}
+  };
+
+  return (
+    <View
+      style={{
+        marginBottom: 5,
+        padding: 0,
+        width: '100%',
+        paddingVertical: 15,
+        paddingHorizontal: 12,
+        alignSelf: 'center',
+        borderRadius: 10,
+        paddingTop: 25
+      }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}>
+        <Heading size={SIZE.xxl}>{notebook.title}</Heading>
+
+        <View
+          style={{
+            flexDirection: 'row'
+          }}>
+          <ActionIcon
+            name="link-variant"
+            onPress={onPinNotebook}
+            customStyle={{
+              marginRight: 15,
+              width:40,
+              height:40
+            }}
+            type={isPinnedToMenu ?  "transparent" : "grayBg"}
+            color={isPinnedToMenu ? colors.accent : colors.icon}
+            size={SIZE.lg}
+          />
+          <ActionIcon
+            size={SIZE.lg}
+
+            onPress={onEditNotebook}
+            name="pencil"
+            type="grayBg"
+            color={colors.icon}
+            customStyle={{
+              width:40,
+              height:40
+            }}
+          />
+        </View>
+      </View>
+
+      {notebook.description && (
+        <Paragraph size={SIZE.md} color={colors.pri}>
+          {notebook.description}
+        </Paragraph>
+      )}
+      {/*   <View
+        style={{
+          marginTop: 15,
+          flexDirection: 'row'
+        }}>
+        <Button
+          title="Edit notebook"
+          width={null}
+          height={null}
+          type="transparent"
+          icon="pencil"
+          fontSize={SIZE.sm}
+          onPress={onEditNotebook}
+          style={{
+            alignSelf: 'flex-start',
+            paddingHorizontal: 12,
+            borderRadius: 100,
+            height: 30,
+            marginRight: 10
+          }}
+        />
+
+        <Button
+          width={null}
+          height={null}
+          type={isPinnedToMenu ? 'shade' : 'transparent'}
+          icon="link-variant"
+          onPress={onPinNotebook}
+          style={{
+            alignSelf: 'flex-start',
+            paddingVertical: 0,
+            paddingHorizontal: 0,
+            width: 30,
+            height: 30,
+            borderColor: isPinnedToMenu ? colors.accent : colors.icon,
+            marginRight: 10
+          }}
+        />
+      </View> */}
+
+      <Paragraph
+        style={{
+          marginTop: 10,
+          fontStyle: 'italic'
+        }}
+        size={SIZE.xs + 1}
+        color={colors.icon}>
+        {notebook.topics.length === 1
+          ? '1 topic'
+          : `${notebook.topics.length} topics`}
+        , last modified on {new Date(notebook.dateEdited).toLocaleString()}
+      </Paragraph>
+    </View>
+  );
+};
diff --git a/apps/mobile/src/utils/database.js b/apps/mobile/src/utils/database.js
index 8068b7d4a..a78d6c610 100644
--- a/apps/mobile/src/utils/database.js
+++ b/apps/mobile/src/utils/database.js
@@ -14,15 +14,15 @@ export const db = new Database(
 db.host(
   __DEV__
     ? {
-      // API_HOST: 'https://api.notesnook.com',
-      //   AUTH_HOST: 'https://auth.streetwriters.co',
-      //   SSE_HOST: 'https://events.streetwriters.co',
-      //   SUBSCRIPTIONS_HOST: 'https://subscriptions.streetwriters.co'
-        API_HOST: 'http://192.168.10.29:5264',
-        AUTH_HOST: 'http://192.168.10.29:8264',
-        SSE_HOST: 'http://192.168.10.29:7264',
-        SUBSCRIPTIONS_HOST: 'http://192.168.10.29:9264',
-        ISSUES_HOST: 'http://192.168.10.29:2624'
+        API_HOST: 'https://api.notesnook.com',
+        AUTH_HOST: 'https://auth.streetwriters.co',
+        SSE_HOST: 'https://events.streetwriters.co',
+        SUBSCRIPTIONS_HOST: 'https://subscriptions.streetwriters.co'
+        // API_HOST: 'http://192.168.10.29:5264',
+        // AUTH_HOST: 'http://192.168.10.29:8264',
+        // SSE_HOST: 'http://192.168.10.29:7264',
+        // SUBSCRIPTIONS_HOST: 'http://192.168.10.29:9264',
+        // ISSUES_HOST: 'http://192.168.10.29:2624'
       }
     : {
         API_HOST: 'https://api.notesnook.com',
diff --git a/apps/mobile/src/views/Editor/EditorHeader.js b/apps/mobile/src/views/Editor/EditorHeader.js
index b98b3bb79..63d749e9d 100644
--- a/apps/mobile/src/views/Editor/EditorHeader.js
+++ b/apps/mobile/src/views/Editor/EditorHeader.js
@@ -180,7 +180,7 @@ const EditorHeader = () => {
 
   const onNoteRemoved = async id => {
     try {
-      console.log("NOTE REMOVED",id);
+      console.log('NOTE REMOVED', id);
       await db.notes.remove(id);
       if (id !== getNote().id) return;
       Navigation.setRoutesToUpdate([
@@ -312,10 +312,15 @@ const EditorHeader = () => {
                 name="crown"
                 color={colors.yellow}
                 customStyle={{
-                  marginLeft: 10,
+                  marginLeft: 10
                 }}
                 top={50}
-                onPress={() => {
+                onPress={async () => {
+                  let note = getNote();
+                  clearEditor(true, true, true);
+                  await loadNote(note);
+
+                  return;
                   if (editing.isFocused) {
                     safeKeyboardDismiss();
                     editing.isFocused = true;
@@ -329,7 +334,7 @@ const EditorHeader = () => {
                 name="cloud-upload-outline"
                 color={colors.pri}
                 customStyle={{
-                  marginLeft: 10,
+                  marginLeft: 10
                 }}
                 top={50}
                 onPress={publishNote}
@@ -341,7 +346,7 @@ const EditorHeader = () => {
                 name="attachment"
                 color={colors.pri}
                 customStyle={{
-                  marginLeft: 10,
+                  marginLeft: 10
                 }}
                 top={50}
                 onPress={picker.pick}
diff --git a/apps/mobile/src/views/Editor/tiny/toolbar/config.js b/apps/mobile/src/views/Editor/tiny/toolbar/config.js
index 943de8b77..75b7ef9e2 100644
--- a/apps/mobile/src/views/Editor/tiny/toolbar/config.js
+++ b/apps/mobile/src/views/Editor/tiny/toolbar/config.js
@@ -59,7 +59,7 @@ export const IMAGE_TOOLTIP_CONFIG = {
   default: null,
   type: 'imageoptions',
   pageX: 0
-}
+};
 
 export const TOOLBAR_CONFIG = [
   [
@@ -93,6 +93,7 @@ export const TOOLBAR_CONFIG = [
       type: 'tooltip',
       valueIcon: 'alignleft',
       fullname: 'Text Alignment',
+      premium: true,
       group: [
         {
           format: 'alignleft',
@@ -385,7 +386,7 @@ export const TOOLBAR_CONFIG = [
     }
   ],
   [
-   /*  {
+    /*  {
       format: 'filepicker',
       type: 'format',
       fullname: 'Attach file',
diff --git a/apps/mobile/src/views/Notebook/index.js b/apps/mobile/src/views/Notebook/index.js
index 39c320ff2..7d44d31ff 100644
--- a/apps/mobile/src/views/Notebook/index.js
+++ b/apps/mobile/src/views/Notebook/index.js
@@ -5,6 +5,7 @@ import { ContainerTopSection } from '../../components/Container/ContainerTopSect
 import { Header } from '../../components/Header';
 import SelectionHeader from '../../components/SelectionHeader';
 import SimpleList from '../../components/SimpleList';
+import { NotebookHeader } from '../../components/SimpleList/notebook-header';
 import {
   eSendEvent,
   eSubscribeEvent,
@@ -27,6 +28,7 @@ export const Notebook = ({route, navigation}) => {
       db.settings.getGroupOptions('topics')
     )
   );
+  console.log('params',route?.params.notebook?.topics)
   const params = useRef(route?.params);
 
   const onLoad = data => {
@@ -92,20 +94,13 @@ export const Notebook = ({route, navigation}) => {
   return (
     <>
       <SelectionHeader screen="Notebook" />
+
       <ContainerTopSection>
         <Header
           title={params.current.title}
           isBack={!params.current.menu}
           screen="Notebook"
           action={_onPressBottomButton}
-          rightButtons={[
-            {
-              icon: 'pencil',
-              title: 'Edit notebook',
-              func: () =>
-                eSendEvent(eOpenAddNotebookDialog, params.current.notebook)
-            }
-          ]}
         />
       </ContainerTopSection>
       <SimpleList
@@ -123,6 +118,15 @@ export const Notebook = ({route, navigation}) => {
           },
           icon: 'pencil'
         }}
+        ListHeader={
+          <NotebookHeader
+            onEditNotebook={() => {
+              eSendEvent(eOpenAddNotebookDialog, params.current.notebook);
+            }}
+            onPress={_onPressBottomButton}
+            notebook={params.current.notebook}
+          />
+        }
         focused={() => navigation.isFocused()}
         placeholderData={{
           heading: params.current.notebook.title,
diff --git a/apps/mobile/src/views/Notes/index.js b/apps/mobile/src/views/Notes/index.js
index fb8049c59..50f29a27a 100644
--- a/apps/mobile/src/views/Notes/index.js
+++ b/apps/mobile/src/views/Notes/index.js
@@ -24,7 +24,7 @@ import {
 } from '../../utils/Events';
 import {openLinkInBrowser} from '../../utils/functions';
 import {tabBarRef} from '../../utils/Refs';
-import { getNote } from '../Editor/Functions';
+import {getNote} from '../Editor/Functions';
 
 const getNotes = params => {
   if (!params) return [];
@@ -170,7 +170,7 @@ export const Notes = ({route, navigation}) => {
         eSendEvent(eOnLoadNote, {type: 'new'});
         editing.currentlyEditing = true;
         editing.movedAway = false;
-       }
+      }
       tabBarRef.current?.goToPage(1);
     } else {
       eSendEvent(eOnLoadNote, {type: 'new'});
@@ -190,7 +190,7 @@ export const Notes = ({route, navigation}) => {
     onPress: () => {
       if (params.current?.type !== 'topic') return;
       eSendEvent(eOpenAddTopicDialog, {
-        notebookId: params.current?.notebookId,      
+        notebookId: params.current?.notebookId,
         toEdit: params.current
       });
     },
@@ -253,6 +253,10 @@ export const Notes = ({route, navigation}) => {
           isBack={!params.current?.menu}
           screen="NotesPage"
           action={_onPressBottomButton}
+          notebook={
+            params.current?.notebookId &&
+            db.notebooks?.notebook(params.current?.notebookId).data
+          }
           rightButtons={
             params.current?.type !== 'topic' ? null : headerRightButtons
           }

From bc88a639eb11545d6094297627ec481ada4599c9 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Tue, 30 Nov 2021 14:01:17 +0500
Subject: [PATCH 12/13] minor change to button height on notebook

---
 .../src/components/NotebookItem/index.js      | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/mobile/src/components/NotebookItem/index.js b/apps/mobile/src/components/NotebookItem/index.js
index 41de4be87..c6a070cba 100644
--- a/apps/mobile/src/components/NotebookItem/index.js
+++ b/apps/mobile/src/components/NotebookItem/index.js
@@ -1,17 +1,17 @@
 import React from 'react';
-import { View } from 'react-native';
+import {View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { notesnook } from '../../../e2e/test.ids';
-import { useTracked } from '../../provider';
-import { useSettingStore } from '../../provider/stores';
-import { eSendEvent } from '../../services/EventManager';
+import {notesnook} from '../../../e2e/test.ids';
+import {useTracked} from '../../provider';
+import {useSettingStore} from '../../provider/stores';
+import {eSendEvent} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { getTotalNotes, history } from '../../utils';
-import { eOnNewTopicAdded, refreshNotesPage } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { ActionSheetEvent } from '../DialogManager/recievers';
+import {getTotalNotes, history} from '../../utils';
+import {eOnNewTopicAdded, refreshNotesPage} from '../../utils/Events';
+import {SIZE} from '../../utils/SizeUtils';
+import {ActionIcon} from '../ActionIcon';
+import {Button} from '../Button';
+import {ActionSheetEvent} from '../DialogManager/recievers';
 import Heading from '../Typography/Heading';
 import Paragraph from '../Typography/Paragraph';
 
@@ -47,7 +47,6 @@ export const NotebookItem = ({item, isTopic = false, notebookID, isTrash}) => {
     };
     eSendEvent(refreshNotesPage, params);
     Navigation.navigate(routeName, params, headerState);
-   
   };
 
   return (
@@ -87,10 +86,10 @@ export const NotebookItem = ({item, isTopic = false, notebookID, isTrash}) => {
               <Button
                 title={topic.title}
                 key={topic.id}
-                height={SIZE.xl}
+                height={null}
                 textStyle={{
                   fontWeight: 'normal',
-                  fontFamily: null,
+                  fontFamily: null
                 }}
                 type="grayBg"
                 fontSize={SIZE.xs + 1}
@@ -103,10 +102,11 @@ export const NotebookItem = ({item, isTopic = false, notebookID, isTrash}) => {
                   borderRadius: 5,
                   maxWidth: 120,
                   borderWidth: 0.5,
+                  paddingVertical:2.5,
                   borderColor: colors.icon,
                   paddingHorizontal: 6,
-                  marginVertical:5,
-                  marginRight:5
+                  marginVertical: 5,
+                  marginRight: 5
                 }}
                 onPress={() => navigateToTopic(topic)}
               />

From b0ef2e49e77f6af554f64a8b749ce45168fbf349 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Wed, 1 Dec 2021 12:33:14 +0500
Subject: [PATCH 13/13] update bouncing view

---
 .../src/components/ActionSheetComponent/BouncingView.js  | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/mobile/src/components/ActionSheetComponent/BouncingView.js b/apps/mobile/src/components/ActionSheetComponent/BouncingView.js
index d2cddfc81..08fbf5994 100644
--- a/apps/mobile/src/components/ActionSheetComponent/BouncingView.js
+++ b/apps/mobile/src/components/ActionSheetComponent/BouncingView.js
@@ -5,13 +5,14 @@ export const BouncingView = ({
   children,
   style,
   duration = 600,
-  animated = true
+  animated = true,
+  initialScale = 0.9
 }) => {
-  const scale = Animated.useValue(!animated ? 1 : 0.9);
+  const scale = Animated.useValue(!animated ? 1 : initialScale);
 
   useEffect(() => {
     if (!animated) return;
-    scale.setValue(0.9);
+    scale.setValue(initialScale);
     timing(scale, {
       toValue: 1,
       duration: duration,
@@ -19,7 +20,7 @@ export const BouncingView = ({
     }).start();
     return () => {
       if (!animated) return;
-      scale.setValue(0.9);
+      scale.setValue(initialScale);
     };
   }, []);