update ui

2025-12-21 05:59:35 +01:00 · 2021-07-17 20:40:49 +05:00
parent 053050aa3e
commit ac3776aaec
13 changed files with 273 additions and 273 deletions
--- a/apps/mobile/src/components/SelectionWrapper/index.js
+++ b/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,
-        height: height * fontScale,
-        borderBottomWidth:1,
-        borderColor:colors.nav
+        paddingVertical:compactMode ? 8 : 12,
      }}>
      {actionStrip && (
        <ActionStrip note={item} setActionStrip={setActionStrip} />
--- a/apps/mobile/src/components/SimpleList/card.js
+++ b/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 {
-  useMessageStore,
-  useSelectionStore
-} from '../../provider/stores';
-import { SIZE } from '../../utils/SizeUtils';
-import { PressableButton } from '../PressableButton';
+import {useTracked} from '../../provider';
+import {useMessageStore, useSelectionStore} from '../../provider/stores';
+import {hexToRGBA} from '../../utils/ColorUtils';
+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={
-            messageBoardState.type === 'error' ? colors.red : color
-          }>
+          color={colors.heading}>
          {messageBoardState.actionText}
        </Paragraph>
      </View>
@@ -76,9 +80,7 @@ export const Card = ({color}) => {
        }}>
        <Icon
          name="chevron-right"
-          color={
-            messageBoardState.type === 'error' ? colors.red : color
-          }
+          color={messageBoardState.type === 'error' ? colors.red : color}
          size={SIZE.lg}
        />
      </View>
--- a/apps/mobile/src/components/SimpleList/index.js
+++ b/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);
+        },
+        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,6 +139,7 @@ const SimpleList = ({
        }
        ListFooterComponent={<Footer />}
        ListHeaderComponent={
+          <>
            <Header
              title={headerProps.heading}
              paragraph={headerProps.paragraph}
@@ -154,6 +148,7 @@ const SimpleList = ({
              type={type}
              screen={screen}
            />
+          </>
        }
      />

--- a/apps/mobile/src/components/SimpleList/sectionheader.js
+++ b/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,
-        borderBottomWidth: 1,
-        borderBottomColor: index !== 0 ? 'transparent' : colors.accent,
+        backgroundColor: colors.nav,
+        alignSelf: 'center',
+        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,10 +84,15 @@ export const SectionHeader = ({item, index, type}) => {
        </Heading>
      </TouchableOpacity>

+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}>
        {index === 0 ? (
          <Button
            onPress={() => {
-            eSendEvent(eOpenSortDialog,type);
+              eSendEvent(eOpenSortDialog, type);
            }}
            title={groupBy}
            icon={
@@ -86,11 +103,33 @@ export const SectionHeader = ({item, index, type}) => {
            height={25}
            style={{
              borderRadius: 100,
+              paddingHorizontal: 0,
+              backgroundColor: 'transparent',
+              marginRight: type === 'notes' || type === "home" || type === 'notebooks' ? 10 : 0,
            }}
-          type="grayBg"
+            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>
  );
 };
--- a/apps/mobile/src/components/SortDialog/index.js
+++ b/apps/mobile/src/components/SortDialog/index.js
@@ -1,18 +1,23 @@
-import React, { createRef } from 'react';
-import { View } from 'react-native';
+import React, {createRef} from 'react';
+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 { db } from '../../utils/DB';
-import { eCloseSortDialog, eOpenSortDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import {GROUP, SORT} from '../../utils';
+import {db} from '../../utils/DB';
+import {eCloseSortDialog, eOpenSortDialog} from '../../utils/Events';
+import {SIZE} from '../../utils/SizeUtils';
+import {sleep} from '../../utils/TimeUtils';
 import ActionSheetWrapper from '../ActionSheetComponent/ActionSheetWrapper';
-import { Button } from '../Button';
-import { PressableButton } from '../PressableButton';
+import {Button} from '../Button';
+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
              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,15 +134,32 @@ 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' ? (
+                <Paragraph color={colors.icon}>
+                  No sort options available.
+                </Paragraph>
+              ) : (
+                Object.keys(SORT).map((item, index) => (
                  <Button
                    key={item}
-                  type={groupOptions.sortBy === item? "transparent" : "gray"}
+                    type={groupOptions.sortBy === item ? 'transparent' : 'gray'}
                    title={SORT[item]}
                    height={40}
                    iconPosition="left"
-                  icon={groupOptions.sortBy === item ? "check-circle-outline" : "checkbox-blank-circle-outline"}
+                    icon={
+                      groupOptions.sortBy === item
+                        ? 'check-circle-outline'
+                        : 'checkbox-blank-circle-outline'
+                    }
+                    textStyle={{
+                      fontWeight: 'normal',
+                      color:colors.pri
+                    }}
                    fontSize={SIZE.sm}
                    style={{
                      backgroundColor: 'transparent',
@@ -151,16 +173,14 @@ class SortDialog extends React.Component {
                    }}
                    iconSize={SIZE.lg}
                  />
-              ))}
+                ))
+              )}
            </View>
-
-            <Seperator />
-            <View>
-              <Heading size={SIZE.xl}>Group by</Heading>
-            </View>
-
-            <Seperator />
-
+            <View
+            style={{
+              paddingHorizontal:12
+            }}
+            >
               {Object.keys(GROUP).map((item, index) => (
              <PressableButton
                key={item}
@@ -184,21 +204,26 @@ 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>
      </ActionSheetWrapper>
    );
--- a/apps/mobile/src/components/TagsDialog/index.js
+++ b/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) {
-    } finally {
+    } catch (e) {}
+
    Navigation.setRoutesToUpdate([
      Navigation.routeNames.NotesPage,
      Navigation.routeNames.Favorites,
      Navigation.routeNames.Notes,
    ]);
-    }
  };

  return (
--- a/apps/mobile/src/provider/interfaces.ts
+++ b/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 = {
--- a/apps/mobile/src/provider/stores.ts
+++ b/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: [] });
  },
 }));
--- a/apps/mobile/src/utils/Colors.js
+++ b/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',
 };
--- a/apps/mobile/src/views/Home/index.js
+++ b/apps/mobile/src/views/Home/index.js
@@ -1,24 +1,19 @@
-import React, {useCallback, useEffect} from 'react';
-import sanitize from 'sanitize-html';
-import {ContainerBottomButton} from '../../components/Container/ContainerBottomButton';
-import {ContainerTopSection} from '../../components/Container/ContainerTopSection';
-import {Header} from '../../components/Header/index';
+import React, { useCallback, useEffect } from 'react';
+import { ContainerBottomButton } from '../../components/Container/ContainerBottomButton';
+import { ContainerTopSection } from '../../components/Container/ContainerTopSection';
+import { Header } from '../../components/Header/index';
 import SelectionHeader from '../../components/SelectionHeader';
 import SimpleList from '../../components/SimpleList';
-import {useTracked} from '../../provider';
-import {Actions} from '../../provider/Actions';
-import {useNoteStore} from '../../provider/stores';
-import {DDS} from '../../services/DeviceDetection';
-import {eSendEvent} from '../../services/EventManager';
+import { useNoteStore } from '../../provider/stores';
+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 {db} from '../../utils/DB';
-import {eOnLoadNote, eScrollEvent} from '../../utils/Events';
-import {MMKV} from '../../utils/mmkv';
-import {tabBarRef} from '../../utils/Refs';
-import Storage from '../../utils/storage';
-import absolutify from 'absolutify';
+import { InteractionManager, scrollRef } from '../../utils';
+import { db } from '../../utils/DB';
+import { eOnLoadNote, eScrollEvent } from '../../utils/Events';
+import { tabBarRef } from '../../utils/Refs';
+
 export const Home = ({navigation}) => {
  const notes = useNoteStore(state => state.notes);
  const setNotes = useNoteStore(state => state.setNotes);
--- a/apps/mobile/src/views/Notebook/index.js
+++ b/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) {}
--- a/apps/mobile/src/views/Notes/index.js
+++ b/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;
  };
--- a/apps/mobile/src/views/Settings/index.js
+++ b/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 Menu, { MenuItem } from 'react-native-reanimated-material-menu';
+import {enabled} from 'react-native-privacy-snapshot';
+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 { ContainerTopSection } from '../../components/Container/ContainerTopSection';
+import {Button} from '../../components/Button';
+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 { Actions } from '../../provider/Actions';
+import {useTracked} from '../../provider';
+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 { db } from '../../utils/DB';
+import {hexToRGBA, RGB_Linear_Shade} from '../../utils/ColorUtils';
+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 { MMKV } from '../../utils/mmkv';
-import { tabBarRef } from '../../utils/Refs';
-import { pv, SIZE } from '../../utils/SizeUtils';
+import {openLinkInBrowser} from '../../utils/functions';
+import {MMKV} from '../../utils/mmkv';
+import {tabBarRef} from '../../utils/Refs';
+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
-          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>
+        <Card color={colors.accent} />
      )}

      {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