minor ui fixes

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

@@ -12,7 +12,7 @@ import Icon from 'react-native-vector-icons/Feather';
 import {db, DDS} from '../../../App';
 import {opacity, ph, pv, SIZE, WEIGHT} from '../../common/common';
 import {ACTIONS} from '../../provider';
-import {getElevation, ToastEvent, timeSince} from '../../utils/utils';
+import {getElevation, ToastEvent} from '../../utils/utils';
 import {updateEvent} from '../DialogManager';
 
 let refs = [];

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

@@ -17,6 +17,10 @@ export const AnimatedSafeAreaView = Animatable.createAnimatableComponent(
   SafeAreaView,
 );
 
+const AnimatedTouchableOpacity = Animatable.createAnimatableComponent(
+  TouchableOpacity,
+);
+
 export const Container = ({
   children,
   bottomButtonOnPress,
@@ -31,21 +35,25 @@ export const Container = ({
 
   useEffect(() => {
     Keyboard.addListener('keyboardDidShow', () => {
+      setTimeout(() => {
         setButtonHide(true);
+      }, 300);
     });
     Keyboard.addListener('keyboardDidHide', () => {
       setTimeout(() => {
         setButtonHide(false);
-      }, 100);
+      }, 300);
     });
     return () => {
       Keyboard.removeListener('keyboardDidShow', () => {
+        setTimeout(() => {
           setButtonHide(true);
+        }, 300);
       });
       Keyboard.removeListener('keyboardDidHide', () => {
         setTimeout(() => {
           setButtonHide(false);
-        }, 100);
+        }, 300);
       });
     };
   }, []);
@@ -67,8 +75,11 @@ export const Container = ({
         }}>
         {children}
 
-        {buttonHide || noBottomButton ? null : (
-          <TouchableOpacity
+        {noBottomButton ? null : (
+          <AnimatedTouchableOpacity
+            transition={['translateY', 'opacity']}
+            useNativeDriver={true}
+            duration={250}
             onPress={bottomButtonOnPress}
             activeOpacity={opacity}
             style={{
@@ -83,6 +94,12 @@ export const Container = ({
               position: 'absolute',
               zIndex: 10,
               bottom: 10,
+              opacity: buttonHide ? 0 : 1,
+              transform: [
+                {
+                  translateY: buttonHide ? 200 : 0,
+                },
+              ],
             }}>
             <View
               style={{
@@ -104,7 +121,7 @@ export const Container = ({
                 {'  ' + bottomButtonText}
               </Text>
             </View>
-          </TouchableOpacity>
+          </AnimatedTouchableOpacity>
         )}
       </KeyboardAvoidingView>
     </AnimatedSafeAreaView>

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

@@ -6,6 +6,7 @@ import {
   Text,
   TouchableOpacity,
   View,
+  DeviceEventEmitter,
 } from 'react-native';
 import FastStorage from 'react-native-fast-storage';
 import Icon from 'react-native-vector-icons/Feather';
@@ -30,6 +31,8 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
 
   // todo
 
+  let overlayRef;
+
   function changeColorScheme(colors = COLOR_SCHEME, accent = ACCENT) {
     let newColors = setColorScheme(colors, accent);
     StatusBar.setBarStyle(newColors.night ? 'light-content' : 'dark-content');
@@ -116,6 +119,19 @@ export const Menu = ({close = () => {}, hide, update = () => {}}) => {
           marginTop: Platform.OS == 'ios' ? 0 : StatusBar.currentHeight - 10,
         }}
       />
+      <View
+        ref={ref => (overlayRef = ref)}
+        onLayout={() => {
+          DeviceEventEmitter.emit('sendOverlayViewRef', {ref: overlayRef});
+        }}
+        style={{
+          height: '100%',
+          width: '100%',
+          position: 'absolute',
+          zIndex: 999,
+          backgroundColor: colors.bg,
+        }}
+      />
 
       <ScrollView
         contentContainerStyle={{minHeight: '80%'}}

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

@@ -106,6 +106,7 @@ export const NotebookItem = ({
               {item && item.topics
                 ? item.topics.slice(1, 4).map(topic => (
                     <View
+                      key={topic.dateCreated.toString() + topic.title}
                       style={{
                         borderRadius: 5,
                         backgroundColor: colors.accent,
@@ -167,18 +168,14 @@ export const NotebookItem = ({
                 alignItems: 'center',
                 marginTop: 5,
               }}>
-              <Icon
-                style={{width: 30}}
-                name="lock"
-                size={SIZE.xs}
-                color={colors.icon}
-              />
+              {item.favorite ? (
                 <Icon
                   style={{width: 30}}
                   name="star"
                   size={SIZE.xs}
                   color={colors.icon}
                 />
+              ) : null}
 
               <Text
                 style={{

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

@@ -20,11 +20,9 @@ import {
   TEMPLATE_EXIT,
 } from '../../components/DialogManager';
 import {EditorMenu} from '../../components/EditorMenu';
-import {useTracked} from '../../provider';
+import {useTracked, ACTIONS} from '../../provider';
 import {SideMenuEvent} from '../../utils/utils';
 import {AnimatedSafeAreaView} from '../Home';
-const w = Dimensions.get('window').width;
-const h = Dimensions.get('window').height;
 
 let EditorWebView;
 let note = {};
@@ -37,20 +35,9 @@ const Editor = ({navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
 
-  ///
-  const updateDB = () => {};
-
   // Local State
   const [sidebar, setSidebar] = useState(DDS.isTab ? true : false);
 
-  const [noteProps, setNoteProps] = useState({
-    tags: [],
-    locked: false,
-    pinned: false,
-    favorite: false,
-    colors: [],
-  });
-
   // FUNCTIONS
 
   const post = value => EditorWebView.postMessage(value);
@@ -72,8 +59,7 @@ const Editor = ({navigation}) => {
       timer = null;
       onChange(evt.nativeEvent.data);
       timer = setTimeout(() => {
-        saveNote(noteProps, true);
-        console.log('saved');
+        saveNote(true);
       }, 1000);
     }
   };
@@ -103,8 +89,8 @@ const Editor = ({navigation}) => {
       },
       dateCreated: timestamp,
     });
-    updateDB();
-    if (lockNote && noteProps.locked) {
+
+    if (lockNote && db.getNote(timestamp).locked) {
       db.lockNote(timestamp, 'password');
     }
   };
@@ -118,15 +104,6 @@ const Editor = ({navigation}) => {
   };
 
   const updateEditor = () => {
-    let props = {
-      tags: note.tags,
-      colors: note.colors,
-      pinned: note.pinned,
-      favorite: note.favorite,
-      locked: note.locked,
-    };
-    setNoteProps({...props});
-
     post(JSON.stringify(note.content.delta));
     post(
       JSON.stringify({

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

@@ -12,12 +12,7 @@ const h = Dimensions.get('window').height;
 export const Tags = ({navigation}) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
-  let isFocused = useIsFocused();
 
-  if (!isFocused) {
-    console.log('block rerender');
-    return <></>;
-  } else {
   return (
     <SafeAreaView
       style={{
@@ -103,7 +98,6 @@ export const Tags = ({navigation}) => {
       </View>
     </SafeAreaView>
   );
-  }
 };
 
 Tags.navigationOptions = {