update ui

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

@@ -1,6 +1,7 @@
 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';
 import {history} from '../../utils';
 import {PressableButton} from '../PressableButton';
@@ -14,13 +15,14 @@ const SelectionWrapper = ({
   background,
   onLongPress,
   onPress,
-  height,
   testID,
 }) => {
   const [state, dispatch] = useTracked();
   const {colors} = state;
   const [actionStrip, setActionStrip] = useState(false);
-  const {fontScale} = useWindowDimensions();
+  const settings = useSettingStore(state => state.settings);
+  const listMode = item.type === "notebook" ? settings.notebooksListMode : settings.notesListMode
+  const compactMode = (item.type === 'notebook' || item.type === 'note') && listMode === "compact"
 
   const _onLongPress = () => {
     if (history.selectedItemsList.length > 0) return;
@@ -64,10 +66,7 @@ const SelectionWrapper = ({
         borderRadius: 0,
         overflow: 'hidden',
         paddingHorizontal: 12,
-        marginTop: 0,
+        paddingVertical:compactMode ? 8 : 12,
-        height: height * fontScale,
-        borderBottomWidth:1,
-        borderColor:colors.nav
       }}>
       {actionStrip && (
         <ActionStrip note={item} setActionStrip={setActionStrip} />

apps/mobile/src/components/SimpleList/card.js

@@ -1,19 +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 { useTracked } from '../../provider';
+import {useTracked} from '../../provider';
-import {
+import {useMessageStore, useSelectionStore} from '../../provider/stores';
-  useMessageStore,
+import {hexToRGBA} from '../../utils/ColorUtils';
-  useSelectionStore
+import {SIZE} from '../../utils/SizeUtils';
-} from '../../provider/stores';
+import {PressableButton} from '../PressableButton';
-import { SIZE } from '../../utils/SizeUtils';
-import { PressableButton } from '../PressableButton';
 import Paragraph from '../Typography/Paragraph';
 
 export const Card = ({color}) => {
-  const [state,dispatch] = useTracked();
+  const [state, dispatch] = useTracked();
   const colors = state.colors;
-  color = color ? color : colors.accent
+  color = color ? color : colors.accent;
 
   const selectionMode = useSelectionStore(state => state.selectionMode);
   const messageBoardState = useMessageStore(state => state.message);
@@ -25,25 +23,33 @@ export const Card = ({color}) => {
       type="transparent"
       customStyle={{
         paddingVertical: 12,
-        width: '100%',
+        width: '95%',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'flex-start',
         paddingHorizontal: 0,
-        borderRadius:0
+        borderRadius: 0,
       }}>
       <View
         style={{
           width: 40,
           backgroundColor:
-            messageBoardState.type === 'error' ? colors.red : color,
+            messageBoardState.type === 'error'
+              ? hexToRGBA(colors.red, 0.15)
+              : hexToRGBA(color,0.15),
           height: 40,
           marginLeft: 10,
           borderRadius: 100,
           alignItems: 'center',
           justifyContent: 'center',
         }}>
-        <Icon size={SIZE.lg} color="white" name={messageBoardState.icon} />
+        <Icon
+          size={SIZE.lg}
+          color={
+            messageBoardState.type === 'error' ? colors.error : color
+          }
+          name={messageBoardState.icon}
+        />
       </View>
 
       <View
@@ -51,16 +57,14 @@ export const Card = ({color}) => {
           marginLeft: 10,
           maxWidth: '75%',
         }}>
-        <Paragraph color={colors.icon} size={SIZE.xs}>
+        <Paragraph color={colors.icon} size={SIZE.xs + 1}>
           {messageBoardState.message}
         </Paragraph>
         <Paragraph
           style={{
             maxWidth: '100%',
           }}
-          color={
+          color={colors.heading}>
-            messageBoardState.type === 'error' ? colors.red : color
-          }>
           {messageBoardState.actionText}
         </Paragraph>
       </View>
@@ -76,9 +80,7 @@ export const Card = ({color}) => {
         }}>
         <Icon
           name="chevron-right"
-          color={
+          color={messageBoardState.type === 'error' ? colors.red : color}
-            messageBoardState.type === 'error' ? colors.red : color
-          }
           size={SIZE.lg}
         />
       </View>

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

@@ -2,7 +2,6 @@ import React, {useEffect, useRef, useState} from 'react';
 import {FlatList, RefreshControl} from 'react-native';
 import {useTracked} from '../../provider';
 import {eSendEvent} from '../../services/EventManager';
-import SettingsService from '../../services/SettingsService';
 import Sync from '../../services/Sync';
 import {eScrollEvent} from '../../utils/Events';
 import JumpToDialog from '../JumpToDialog';
@@ -15,14 +14,6 @@ import {Footer} from './footer';
 import {Header} from './header';
 import {SectionHeader} from './section-header';
 
-const heights = {
-  note: 100,
-  notebook: 110,
-  tag: 80,
-  topic: 80,
-  header: 35,
-};
-
 let renderItems = {
   note: NoteWrapper,
   notebook: NotebookWrapper,
@@ -34,7 +25,7 @@ let renderItems = {
 const RenderItem = ({item, index}) => {
   const Item = renderItems[item.itemType || item.type];
   
-  return <Item item={item} index={index} />;
+  return <Item item={item} tags={item.tags} index={index} />;
 };
 
 const SimpleList = ({
@@ -43,8 +34,6 @@ const SimpleList = ({
   customRefresh,
   customRefreshing,
   refreshCallback,
-  sortMenuButton,
-  jumpToDialog,
   placeholderData,
   loading,
   headerProps = {
@@ -60,9 +49,12 @@ const SimpleList = ({
 
   useEffect(() => {
     if (!loading) {
-      setTimeout(() => {
+      setTimeout(
-        _setLoading(false);
+        () => {
-      }, 300);
+          _setLoading(false);
+        },
+        listData.length === 0 ? 0 : 300,
+      );
     } else {
       _setLoading(true);
     }
@@ -74,6 +66,7 @@ const SimpleList = ({
         <SectionHeader
           item={item}
           index={index}
+          title={headerProps.heading}
           type={screen === 'Notes' ? 'home' : type}
         />
       ) : (
@@ -117,7 +110,7 @@ const SimpleList = ({
         style={styles}
         keyExtractor={_keyExtractor}
         ref={scrollRef}
-        data={_loading ? listData.slice(0,9) : listData}
+        data={_loading ? listData.slice(0, 9) : listData}
         renderItem={renderItem}
         onScroll={_onScroll}
         initialNumToRender={10}
@@ -146,14 +139,16 @@ const SimpleList = ({
         }
         ListFooterComponent={<Footer />}
         ListHeaderComponent={
-          <Header
+          <>
-            title={headerProps.heading}
+            <Header
-            paragraph={headerProps.paragraph}
+              title={headerProps.heading}
-            onPress={headerProps.onPress}
+              paragraph={headerProps.paragraph}
-            icon={headerProps.icon}
+              onPress={headerProps.onPress}
-            type={type}
+              icon={headerProps.icon}
-            screen={screen}
+              type={type}
-          />
+              screen={screen}
+            />
+          </>
         }
       />
 

apps/mobile/src/components/SimpleList/sectionheader.js

@@ -1,19 +1,23 @@
 import React, {useEffect, useState} from 'react';
 import {TouchableOpacity, useWindowDimensions, View} from 'react-native';
 import {useTracked} from '../../provider';
+import {useSettingStore} from '../../provider/stores';
 import {
   eSendEvent,
   eSubscribeEvent,
   eUnSubscribeEvent,
 } from '../../services/EventManager';
+import SettingsService from '../../services/SettingsService';
 import {SORT} from '../../utils';
+import {COLORS_NOTE} from '../../utils/Colors';
 import {db} from '../../utils/DB';
 import {eOpenJumpToDialog, eOpenSortDialog} from '../../utils/Events';
 import {SIZE} from '../../utils/SizeUtils';
+import {ActionIcon} from '../ActionIcon';
 import {Button} from '../Button';
 import Heading from '../Typography/Heading';
 
-export const SectionHeader = ({item, index, type}) => {
+export const SectionHeader = ({item, index, type, title}) => {
   const [state] = useTracked();
   const {colors} = state;
   const {fontScale} = useWindowDimensions();
@@ -23,6 +27,12 @@ export const SectionHeader = ({item, index, type}) => {
   let groupBy = Object.keys(SORT).find(
     key => SORT[key] === groupOptions.groupBy,
   );
+
+  const color = COLORS_NOTE[title.toLowerCase()] || colors.accent;
+  const settings = useSettingStore(state => state.settings);
+  const listMode =
+    type === 'notebooks' ? settings.notebooksListMode : settings.notesListMode;
+
   groupBy = !groupBy
     ? 'Default'
     : groupBy.slice(0, 1).toUpperCase() + groupBy.slice(1, groupBy.length);
@@ -30,6 +40,7 @@ export const SectionHeader = ({item, index, type}) => {
   const onUpdate = () => {
     setGroupOptions({...db.settings?.getGroupOptions(type)});
   };
+
   useEffect(() => {
     eSubscribeEvent('groupOptionsUpdate', onUpdate);
     return () => {
@@ -42,17 +53,18 @@ export const SectionHeader = ({item, index, type}) => {
       style={{
         flexDirection: 'row',
         alignItems: 'center',
-        width: '100%',
+        width: '95%',
         justifyContent: 'space-between',
         paddingHorizontal: 12,
         height: 35 * fontScale,
-        backgroundColor: index === 0 ? 'transparent' : colors.nav,
+        backgroundColor: colors.nav,
-        borderBottomWidth: 1,
+        alignSelf: 'center',
-        borderBottomColor: index !== 0 ? 'transparent' : colors.accent,
+        borderRadius: 5,
+        marginVertical: 5,
       }}>
       <TouchableOpacity
         onPress={() => {
-          eSendEvent(eOpenJumpToDialog,type);
+          eSendEvent(eOpenJumpToDialog, type);
         }}
         activeOpacity={0.9}
         hitSlop={{top: 10, left: 10, right: 30, bottom: 15}}
@@ -61,7 +73,7 @@ export const SectionHeader = ({item, index, type}) => {
           justifyContent: 'center',
         }}>
         <Heading
-          color={colors.accent}
+          color={color}
           size={SIZE.sm}
           style={{
             minWidth: 60,
@@ -72,25 +84,52 @@ export const SectionHeader = ({item, index, type}) => {
         </Heading>
       </TouchableOpacity>
 
-      {index === 0 ? (
+      <View
-        <Button
+        style={{
-          onPress={() => {
+          flexDirection: 'row',
-            eSendEvent(eOpenSortDialog,type);
+          alignItems: 'center',
-          }}
+        }}>
-          title={groupBy}
+        {index === 0 ? (
-          icon={
+          <Button
-            groupOptions.sortDirection === 'asc'
+            onPress={() => {
-              ? 'sort-ascending'
+              eSendEvent(eOpenSortDialog, type);
-              : 'sort-descending'
+            }}
-          }
+            title={groupBy}
-          height={25}
+            icon={
-          style={{
+              groupOptions.sortDirection === 'asc'
-            borderRadius: 100,
+                ? 'sort-ascending'
-          }}
+                : 'sort-descending'
-          type="grayBg"
+            }
-          iconPosition="right"
+            height={25}
-        />
+            style={{
-      ) : null}
+              borderRadius: 100,
+              paddingHorizontal: 0,
+              backgroundColor: 'transparent',
+              marginRight: type === 'notes' || type === "home" || type === 'notebooks' ? 10 : 0,
+            }}
+            type="gray"
+            iconPosition="right"
+          />
+        ) : null}
+
+        {type === 'notes' || type === 'notebooks' || type === 'home' ? (
+          <ActionIcon
+            customStyle={{
+              width: 25,
+              height: 25,
+            }}
+            color={colors.icon}
+            name={listMode == 'compact' ? 'view-list' : 'view-list-outline'}
+            onPress={() => {
+              SettingsService.set(
+                type !== 'notebooks' ? 'notesListMode' : 'notebooksListMode',
+                listMode === 'normal' ? 'compact' : 'normal',
+              );
+            }}
+            size={SIZE.md}
+          />
+        ) : null}
+      </View>
     </View>
   );
 };

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

@@ -1,18 +1,23 @@
-import React, { createRef } from 'react';
+import React, {createRef} from 'react';
-import { View } from 'react-native';
+import {View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
+import {
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { GROUP, SORT } from '../../utils';
+import {GROUP, SORT} from '../../utils';
-import { db } from '../../utils/DB';
+import {db} from '../../utils/DB';
-import { eCloseSortDialog, eOpenSortDialog } from '../../utils/Events';
+import {eCloseSortDialog, eOpenSortDialog} from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
+import {SIZE} from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import {sleep} from '../../utils/TimeUtils';
 import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
-import { Button } from '../Button';
+import {Button} from '../Button';
-import { PressableButton } from '../PressableButton';
+import {PressableButton} from '../PressableButton';
 import Seperator from '../Seperator';
 import Heading from '../Typography/Heading';
+import Paragraph from '../Typography/Paragraph';
 
 class SortDialog extends React.Component {
   constructor(props) {
@@ -32,6 +37,7 @@ class SortDialog extends React.Component {
         groupOptions: db.settings.getGroupOptions(this.props.type),
       },
       async () => {
+        console.log(this.state.groupOptions)
         this.actionSheet.current?.setModalVisible(true);
       },
     );
@@ -55,13 +61,13 @@ class SortDialog extends React.Component {
     eUnSubscribeEvent(eCloseSortDialog, this.close);
   }
 
-  updateGroupOptions = async (_groupOptions) => {
+  updateGroupOptions = async _groupOptions => {
     await db.settings.setGroupOptions(this.props.type, _groupOptions);
     this.setState({
       groupOptions: _groupOptions,
     });
     Navigation.setRoutesToUpdate([this.props.screen]);
-    eSendEvent('groupOptionsUpdate')
+    eSendEvent('groupOptionsUpdate');
   };
 
   render() {
@@ -79,21 +85,20 @@ class SortDialog extends React.Component {
             justifyContent: 'space-between',
             borderRadius: 10,
             paddingTop: 10,
-            paddingHorizontal: 12,
           }}>
-          <View>
+          <View
-            <View
               style={{
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'space-between',
+                paddingHorizontal:12
               }}>
               <Heading
                 size={SIZE.xl}
                 style={{
                   alignSelf: 'center',
                 }}>
-                Sort by
+                Sort & Group
               </Heading>
 
               <Button
@@ -109,7 +114,7 @@ class SortDialog extends React.Component {
                 }
                 height={25}
                 iconPosition="right"
-                type="accent"
+                type="grayBg"
                 style={{
                   borderRadius: 100,
                 }}
@@ -129,39 +134,54 @@ class SortDialog extends React.Component {
               style={{
                 flexDirection: 'row',
                 justifyContent: 'space-around',
+                borderBottomWidth: 1,
+                borderBottomColor: colors.nav,
+                marginBottom: 12,
+                paddingHorizontal:12
               }}>
-              {Object.keys(SORT).map((item, index) => (
+              {this.state.groupOptions.groupBy === 'abc' ? (
-                <Button
+                <Paragraph color={colors.icon}>
-                  key={item}
+                  No sort options available.
-                  type={groupOptions.sortBy === item? "transparent" : "gray"}
+                </Paragraph>
-                  title={SORT[item]}
+              ) : (
-                  height={40}
+                Object.keys(SORT).map((item, index) => (
-                  iconPosition="left"
+                  <Button
-                  icon={groupOptions.sortBy === item ? "check-circle-outline" : "checkbox-blank-circle-outline"}
+                    key={item}
-                  fontSize={SIZE.sm}
+                    type={groupOptions.sortBy === item ? 'transparent' : 'gray'}
-                  style={{
+                    title={SORT[item]}
-                    backgroundColor: 'transparent',
+                    height={40}
-                  }}
+                    iconPosition="left"
-                  onPress={async () => {
+                    icon={
-                    let _groupOptions = {
+                      groupOptions.sortBy === item
-                      ...groupOptions,
+                        ? 'check-circle-outline'
-                      sortBy: type === 'trash' ? 'dateDeleted' : item,
+                        : 'checkbox-blank-circle-outline'
-                    };
+                    }
-                    await this.updateGroupOptions(_groupOptions);
+                    textStyle={{
-                  }}
+                      fontWeight: 'normal',
-                  iconSize={SIZE.lg}
+                      color:colors.pri
-                />
+                    }}
-              ))}
+                    fontSize={SIZE.sm}
+                    style={{
+                      backgroundColor: 'transparent',
+                    }}
+                    onPress={async () => {
+                      let _groupOptions = {
+                        ...groupOptions,
+                        sortBy: type === 'trash' ? 'dateDeleted' : item,
+                      };
+                      await this.updateGroupOptions(_groupOptions);
+                    }}
+                    iconSize={SIZE.lg}
+                  />
+                ))
+              )}
             </View>
-
+            <View
-            <Seperator />
+            style={{
-            <View>
+              paddingHorizontal:12
-              <Heading size={SIZE.xl}>Group by</Heading>
+            }}
-            </View>
+            >
-
+               {Object.keys(GROUP).map((item, index) => (
-            <Seperator />
-
-            {Object.keys(GROUP).map((item, index) => (
               <PressableButton
                 key={item}
                 testID={'btn-' + item}
@@ -184,22 +204,27 @@ class SortDialog extends React.Component {
                   paddingHorizontal: 12,
                   marginBottom: 10,
                 }}>
-                <Heading
+                <Paragraph
                   size={SIZE.sm}
+                  style={{
+                    fontWeight:groupOptions.groupBy === GROUP[item] ? "bold" : "normal"
+                  }}
                   color={
                     groupOptions.groupBy === GROUP[item]
                       ? colors.accent
-                      : colors.icon
+                      : colors.pri
                   }>
                   {item.slice(0, 1).toUpperCase() + item.slice(1, item.length)}
-                </Heading>
+                </Paragraph>
                 {groupOptions.groupBy === GROUP[item] ? (
                   <Icon color={colors.accent} name="check" size={SIZE.lg} />
                 ) : null}
               </PressableButton>
             ))}
+            </View>
+           
+
           </View>
-        </View>
       </ActionSheetWrapper>
     );
   }

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

@@ -19,7 +19,7 @@ const TagsDialog = () => {
   const [visible, setVisible] = useState(false);
   const [note, setNote] = useState(null);
   const allTags = useTagStore(state => state.tags);
-  const [tags, setTags] = useState(allTags);
+  const [tags, setTags] = useState([]);
   const [query, setQuery] = useState(null);
   const inputRef = useRef();
   const actionSheetRef = useRef();
@@ -39,6 +39,7 @@ const TagsDialog = () => {
 
   const sortTags = () => {
     let _tags = [...allTags];
+    _tags = _tags.filter(t => t.type === 'tag');
     _tags = _tags.sort((a, b) => a.title.localeCompare(b.title));
     if (query) {
       _tags = _tags.filter(t => t.title.startsWith(query));
@@ -57,7 +58,6 @@ const TagsDialog = () => {
       }
     }
     noteTags = noteTags.sort((a, b) => a.title.localeCompare(b.title));
-
     setTags([...noteTags, ..._tags]);
   };
 
@@ -118,6 +118,12 @@ const TagsDialog = () => {
         context: 'local',
       });
     }
+
+    Navigation.setRoutesToUpdate([
+      Navigation.routeNames.NotesPage,
+      Navigation.routeNames.Favorites,
+      Navigation.routeNames.Notes,
+    ]);
   };
 
   return !visible ? null : (
@@ -223,15 +229,15 @@ const TagItem = ({tag, note, setNote}) => {
       } else {
         await db.notes.note(note.id).tag(tag.title);
       }
+      useTagStore.getState().setTags();
       setNote(db.notes.note(note.id).data);
-    } catch (e) {
+    } catch (e) {}
-    } finally {
+
-      Navigation.setRoutesToUpdate([
+    Navigation.setRoutesToUpdate([
-        Navigation.routeNames.NotesPage,
+      Navigation.routeNames.NotesPage,
-        Navigation.routeNames.Favorites,
+      Navigation.routeNames.Favorites,
-        Navigation.routeNames.Notes,
+      Navigation.routeNames.Notes,
-      ]);
+    ]);
-    }
   };
 
   return (

apps/mobile/src/provider/interfaces.ts

@@ -73,7 +73,10 @@ export type Settings = {
     screenshotMode?: boolean,
     privacyScreen?: boolean,
     appLockMode?: string,
-    telemetry:boolean
+    telemetry:boolean,
+    notebooksListMode: "normal" | "compact",
+    notesListMode: "normal" | "compact",
+
 }
 
 type Dimensions = {

apps/mobile/src/provider/stores.ts

@@ -28,6 +28,7 @@ export const useNoteStore = create<NoteStore>((set, get) => ({
   setLoading: loading => set({ loading: loading }),
   setNotes: items => {
     if (!items) {
+      
       set({
         notes: groupArray(db.notes.all, db.settings?.getGroupOptions("home")),
       });
@@ -165,6 +166,8 @@ export const useSettingStore = create<SettingStore>((set, get) => ({
     privacyScreen: false,
     appLockMode: 'none',
     telemetry: true,
+    notebooksListMode:"normal",
+    notesListMode:"normal"
   },
   fullscreen: false,
   deviceMode: null,
@@ -236,6 +239,8 @@ export const useSelectionStore = create<SelectionStore>((set, get) => ({
     });
   },
   clearSelection: () => {
+    history.selectedItemsList = [];
+    history.selectionMode = false;
     set({ selectionMode: false, selectedItemsList: [] });
   },
 }));

apps/mobile/src/utils/Colors.js

@@ -46,7 +46,7 @@ export var COLOR_SCHEME = {
   bg: '#ffffff',
   navbg: '#f7f7f7',
   nav: '#f7f7f7',
-  pri: '#000000',
+  pri: '#424242',
   sec: 'white',
   light: '#ffffff',
 };
@@ -59,7 +59,7 @@ export const COLOR_SCHEME_LIGHT = {
   nav: '#f7f7f7',
   input: 'transparent',
   heading: '#212121',
-  pri: '#424242',
+  pri: '#505050',
   sec: '#ffffff',
   light: '#ffffff',
 };

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

@@ -1,24 +1,19 @@
-import React, {useCallback, useEffect} from 'react';
+import React, { useCallback, useEffect } from 'react';
-import sanitize from 'sanitize-html';
+import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton';
-import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
+import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
-import {ContainerTopSection} from '../../components/Container/ContainerTopSection';
+import { Header } from '../../components/Header/index';
-import {Header} from '../../components/Header/index';
 import SelectionHeader from '../../components/SelectionHeader';
 import SimpleList from '../../components/SimpleList';
-import {useTracked} from '../../provider';
+import { useNoteStore } from '../../provider/stores';
-import {Actions} from '../../provider/Actions';
+import { DDS } from '../../services/DeviceDetection';
-import {useNoteStore} from '../../provider/stores';
+import { eSendEvent } from '../../services/EventManager';
-import {DDS} from '../../services/DeviceDetection';
-import {eSendEvent} from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import SearchService from '../../services/SearchService';
-import {InteractionManager, scrollRef} from '../../utils';
+import { InteractionManager, scrollRef } from '../../utils';
-import {db} from '../../utils/DB';
+import { db } from '../../utils/DB';
-import {eOnLoadNote, eScrollEvent} from '../../utils/Events';
+import { eOnLoadNote, eScrollEvent } from '../../utils/Events';
-import {MMKV} from '../../utils/mmkv';
+import { tabBarRef } from '../../utils/Refs';
-import {tabBarRef} from '../../utils/Refs';
+
-import Storage from '../../utils/storage';
-import absolutify from 'absolutify';
 export const Home = ({navigation}) => {
   const notes = useNoteStore(state => state.notes);
   const setNotes = useNoteStore(state => state.setNotes);

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

@@ -1,3 +1,4 @@
+import {groupArray} from 'notes-core/utils/grouping';
 import React, {useEffect, useState} from 'react';
 import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
 import {ContainerTopSection} from '../../components/Container/ContainerTopSection';
@@ -21,7 +22,12 @@ import {
 } from '../../utils/Events';
 
 export const Notebook = ({route, navigation}) => {
-  const [topics, setTopics] = useState(route.params.notebook?.topics);
+  const [topics, setTopics] = useState(
+    groupArray(
+      route.params.notebook?.topics || [],
+      db.settings.getGroupOptions('topics'),
+    ),
+  );
   let params = route.params;
   let ranAfterInteractions = false;
 
@@ -35,19 +41,12 @@ export const Notebook = ({route, navigation}) => {
       let notebook = db.notebooks.notebook(params?.notebook?.id)?.data;
       if (notebook) {
         params.notebook = notebook;
-        setTopics(notebook.topics);
+        setTopics(
+          groupArray(notebook.topics, db.settings.getGroupOptions('topics')),
+        );
         params.title = params.notebook.title;
       }
       eSendEvent(eScrollEvent, {name: params.title, type: 'in'});
-      if (params.menu) {
-        navigation.setOptions({
-          gestureEnabled: false,
-        });
-      } else {
-        navigation.setOptions({
-          gestureEnabled: Platform.OS === 'ios',
-        });
-      }
       updateSearch();
       ranAfterInteractions = false;
     } catch (e) {}

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

@@ -59,17 +59,6 @@ export const Notes = ({route, navigation}) => {
       Navigation.goBack();
     }
     setNotes(groupArray(_notes, 'notes'));
-    if (params.menu) {
-      navigation.setOptions({
-        animationEnabled: true,
-        gestureEnabled: false,
-      });
-    } else {
-      navigation.setOptions({
-        animationEnabled: true,
-        gestureEnabled: Platform.OS === 'ios',
-      });
-    }
     updateSearch();
     ranAfterInteractions = false;
   };

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

@@ -4,7 +4,7 @@ import React, {
   useCallback,
   useEffect,
   useRef,
-  useState
+  useState,
 } from 'react';
 import {
   Appearance,
@@ -12,43 +12,44 @@ import {
   Platform,
   ScrollView,
   TouchableOpacity,
-  View
+  View,
 } from 'react-native';
 import * as RNIap from 'react-native-iap';
-import { enabled } from 'react-native-privacy-snapshot';
+import {enabled} from 'react-native-privacy-snapshot';
-import Menu, { MenuItem } from 'react-native-reanimated-material-menu';
+import Menu, {MenuItem} from 'react-native-reanimated-material-menu';
 import AnimatedProgress from 'react-native-reanimated-progress-bar';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import ToggleSwitch from 'toggle-switch-react-native';
-import { Button } from '../../components/Button';
+import {Button} from '../../components/Button';
-import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
+import {ContainerTopSection} from '../../components/Container/ContainerTopSection';
 import BaseDialog from '../../components/Dialog/base-dialog';
 import DialogButtons from '../../components/Dialog/dialog-buttons';
 import DialogContainer from '../../components/Dialog/dialog-container';
 import DialogHeader from '../../components/Dialog/dialog-header';
-import { Header as TopHeader } from '../../components/Header/index';
+import {Header as TopHeader} from '../../components/Header/index';
 import Input from '../../components/Input';
-import { PressableButton } from '../../components/PressableButton';
+import {PressableButton} from '../../components/PressableButton';
 import Seperator from '../../components/Seperator';
-import { Toast } from '../../components/Toast';
+import {Card} from '../../components/SimpleList/card';
+import {Toast} from '../../components/Toast';
 import Heading from '../../components/Typography/Heading';
 import Paragraph from '../../components/Typography/Paragraph';
-import { useTracked } from '../../provider';
+import {useTracked} from '../../provider';
-import { Actions } from '../../provider/Actions';
+import {Actions} from '../../provider/Actions';
 import {
   useMessageStore,
   useSettingStore,
-  useUserStore
+  useUserStore,
 } from '../../provider/stores';
 import Backup from '../../services/Backup';
 import BiometricService from '../../services/BiometricService';
-import { DDS } from '../../services/DeviceDetection';
+import {DDS} from '../../services/DeviceDetection';
 import {
   eSendEvent,
   eSubscribeEvent,
   eUnSubscribeEvent,
   openVault,
-  ToastEvent
+  ToastEvent,
 } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import PremiumService from '../../services/PremiumService';
@@ -62,17 +63,17 @@ import {
   preloadImages,
   SUBSCRIPTION_PROVIDER,
   SUBSCRIPTION_STATUS,
-  SUBSCRIPTION_STATUS_STRINGS
+  SUBSCRIPTION_STATUS_STRINGS,
 } from '../../utils';
 import {
   ACCENT,
   COLOR_SCHEME,
   COLOR_SCHEME_DARK,
   COLOR_SCHEME_LIGHT,
-  setColorScheme
+  setColorScheme,
 } from '../../utils/Colors';
-import { hexToRGBA, RGB_Linear_Shade } from '../../utils/ColorUtils';
+import {hexToRGBA, RGB_Linear_Shade} from '../../utils/ColorUtils';
-import { db } from '../../utils/DB';
+import {db} from '../../utils/DB';
 import {
   eCloseProgressDialog,
   eOpenLoginDialog,
@@ -81,14 +82,14 @@ import {
   eOpenRecoveryKeyDialog,
   eOpenRestoreDialog,
   eScrollEvent,
-  eUpdateSearchState
+  eUpdateSearchState,
 } from '../../utils/Events';
-import { openLinkInBrowser } from '../../utils/functions';
+import {openLinkInBrowser} from '../../utils/functions';
-import { MMKV } from '../../utils/mmkv';
+import {MMKV} from '../../utils/mmkv';
-import { tabBarRef } from '../../utils/Refs';
+import {tabBarRef} from '../../utils/Refs';
-import { pv, SIZE } from '../../utils/SizeUtils';
+import {pv, SIZE} from '../../utils/SizeUtils';
 import Storage from '../../utils/storage';
-import { sleep } from '../../utils/TimeUtils';
+import {sleep} from '../../utils/TimeUtils';
 
 let menuRef = createRef();
 
@@ -396,7 +397,9 @@ const SectionHeader = ({title, collapsed, setCollapsed}) => {
         marginBottom: 5,
         marginTop: 5,
       }}>
-      <Paragraph size={SIZE.md + 1} color={collapsed ? colors.icon : colors.accent}>
+      <Paragraph
+        size={SIZE.md + 1}
+        color={collapsed ? colors.icon : colors.accent}>
         {title}
       </Paragraph>
 
@@ -635,7 +638,7 @@ const CustomButton = ({
         justifyContent: 'space-between',
         alignItems: 'center',
         paddingHorizontal: 12,
-        paddingVertical: 6,
+        paddingVertical: 12,
         width: '100%',
         borderRadius: 0,
         flexDirection: 'row',
@@ -744,67 +747,7 @@ const SettingsUserSection = () => {
   return (
     <>
       {messageBoardState && messageBoardState?.visible && (
-        <PressableButton
+        <Card color={colors.accent} />
-          onPress={messageBoardState.onPress}
-          customStyle={{
-            paddingVertical: 12,
-            width: '100%',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'flex-start',
-            paddingHorizontal: 0,
-          }}>
-          <View
-            style={{
-              width: 40,
-              backgroundColor:
-                messageBoardState.type === 'error' ? colors.red : colors.accent,
-              height: 40,
-              marginLeft: 10,
-              borderRadius: 100,
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}>
-            <Icon size={SIZE.lg} color="white" name={messageBoardState.icon} />
-          </View>
-
-          <View
-            style={{
-              marginLeft: 10,
-              maxWidth: '75%',
-            }}>
-            <Paragraph color={colors.icon} size={SIZE.xs}>
-              {messageBoardState.message}
-            </Paragraph>
-            <Paragraph
-              style={{
-                maxWidth: '100%',
-              }}
-              color={
-                messageBoardState.type === 'error' ? colors.red : colors.accent
-              }>
-              {messageBoardState.actionText}
-            </Paragraph>
-          </View>
-
-          <View
-            style={{
-              width: 40,
-              height: 40,
-              justifyContent: 'center',
-              alignItems: 'center',
-              position: 'absolute',
-              right: 6,
-            }}>
-            <Icon
-              name="chevron-right"
-              color={
-                messageBoardState.type === 'error' ? colors.red : colors.accent
-              }
-              size={SIZE.lg}
-            />
-          </View>
-        </PressableButton>
       )}
 
       {user ? (
@@ -1180,7 +1123,7 @@ const SettingsAppearanceSection = () => {
           <View
             style={{
               paddingHorizontal: 12,
-              marginTop:5
+              marginTop: 5,
             }}>
             <Paragraph
               size={SIZE.md}
@@ -1257,10 +1200,10 @@ const SettingsAppearanceSection = () => {
                   justifyContent: 'center',
                   alignItems: 'center',
                   marginRight: 10,
-                  marginVertical:5,
+                  marginVertical: 5,
                   width: DDS.isLargeTablet() ? 40 : 50,
                   height: DDS.isLargeTablet() ? 40 : 50,
-                  borderRadius:100,
+                  borderRadius: 100,
                 }}>
                 {colors.accent === item ? (
                   <Icon