add new header for notebook screen & topic

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" />

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}

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 {
+  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'
       }}>
+      {!hide ? (
         <Heading
-        numberOfLines={1}
+          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>
+      ) : null}
     </View>
   );
 };

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 { useEditorStore } from '../../provider/stores';
 import { hexToRGBA } from '../../utils/ColorUtils';
-import {SIZE} from '../../utils/SizeUtils';
-import Heading from '../Typography/Heading';
 
 export const Filler = ({item, background}) => {
   const [state] = useTracked();

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import {useWindowDimensions} from 'react-native';
 import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
@@ -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={{

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,6 +148,9 @@ const SimpleList = ({
         ListFooterComponent={<Footer />}
         ListHeaderComponent={
           <>
+            {ListHeader ? (
+              ListHeader
+            ) : (
               <Header
                 title={headerProps.heading}
                 paragraph={headerProps.paragraph}
@@ -156,6 +160,7 @@ const SimpleList = ({
                 type={type}
                 screen={screen}
               />
+            )}
           </>
         }
       />

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>
+  );
+};

apps/mobile/src/utils/database.js

@@ -14,15 +14,15 @@ export const db = new Database(
 db.host(
   __DEV__
     ? {
-      // API_HOST: 'https://api.notesnook.com',
+        API_HOST: 'https://api.notesnook.com',
-      //   AUTH_HOST: 'https://auth.streetwriters.co',
+        AUTH_HOST: 'https://auth.streetwriters.co',
-      //   SSE_HOST: 'https://events.streetwriters.co',
+        SSE_HOST: 'https://events.streetwriters.co',
-      //   SUBSCRIPTIONS_HOST: 'https://subscriptions.streetwriters.co'
+        SUBSCRIPTIONS_HOST: 'https://subscriptions.streetwriters.co'
-        API_HOST: 'http://192.168.10.29:5264',
+        // API_HOST: 'http://192.168.10.29:5264',
-        AUTH_HOST: 'http://192.168.10.29:8264',
+        // AUTH_HOST: 'http://192.168.10.29:8264',
-        SSE_HOST: 'http://192.168.10.29:7264',
+        // SSE_HOST: 'http://192.168.10.29:7264',
-        SUBSCRIPTIONS_HOST: 'http://192.168.10.29:9264',
+        // SUBSCRIPTIONS_HOST: 'http://192.168.10.29:9264',
-        ISSUES_HOST: 'http://192.168.10.29:2624'
+        // ISSUES_HOST: 'http://192.168.10.29:2624'
       }
     : {
         API_HOST: 'https://api.notesnook.com',

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}

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',

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,

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

@@ -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
           }