refactor

apps/mobile/.vscode/settings.json

@@ -0,0 +1 @@
+{}

apps/mobile/App.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import Orientation from 'react-native-orientation';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import AppLoader from './src/components/AppLoader';
+import Launcher from './src/components/launcher';
 import { RootView } from './src/navigation/RootView';
 import { useTracked } from './src/provider';
 import { initialize, useSettingStore, useUserStore } from './src/provider/stores';
@@ -10,11 +10,10 @@ import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from './src/services/E
 import Notifications from './src/services/Notifications';
 import SettingsService from './src/services/SettingsService';
 import { TipManager } from './src/services/tip-manager';
-import { Tracker } from './src/utils';
 import { db } from './src/utils/database';
-import { eDispatchAction } from './src/utils/Events';
-import { MMKV } from './src/utils/mmkv';
-import { useAppEvents } from './src/utils/use-app-events';
+import { eDispatchAction } from './src/utils/events';
+import { useAppEvents } from './src/utils/hooks/use-app-events';
+import { MMKV } from './src/utils/database/mmkv';
 
 let databaseHasLoaded = false;
 
@@ -78,9 +77,6 @@ const App = () => {
         await TipManager.init();
         await loadDatabase();
         useUserStore.getState().setUser(await db.user.getUser());
-        if (SettingsService.get().telemetry) {
-          Tracker.record('3c6890ce-8410-49d5-8831-15fb2eb28a21');
-        }
       } catch (e) {
       } finally {
         databaseHasLoaded = true;
@@ -103,7 +99,7 @@ const App = () => {
   return (
     <SafeAreaProvider>
       <RootView />
-      <AppLoader onLoad={loadMainApp} />
+      <Launcher onLoad={loadMainApp} />
     </SafeAreaProvider>
   );
 };

apps/mobile/share/index.js

@@ -28,8 +28,8 @@ import isURL from 'validator/lib/isURL';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../src/services/EventManager';
 import { getElevation } from '../src/utils';
 import { db } from '../src/utils/database';
-import Storage from '../src/utils/storage';
-import { sleep } from '../src/utils/TimeUtils';
+import Storage from '../src/utils/database/storage';
+import { sleep } from '../src/utils/time';
 import { Search } from './search';
 import { useShareStore } from './store';
 

apps/mobile/share/quick-note.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Appearance, SafeAreaView } from 'react-native';
 import RNBootSplash from 'react-native-bootsplash';
-import { COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT } from '../src/utils/Colors';
+import { COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT } from '../src/utils/color-scheme';
 import NotesnookShare from './index';
 
 export default class QuickNoteIOS extends Component {

apps/mobile/share/store.js

@@ -1,7 +1,7 @@
 import { Appearance } from 'react-native';
 import create from 'zustand';
-import { ACCENT, COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT, setAccentColor } from '../src/utils/Colors';
-import { MMKV } from '../src/utils/mmkv';
+import { ACCENT, COLOR_SCHEME_DARK, COLOR_SCHEME_LIGHT } from '../src/utils/color-scheme';
+import { MMKV } from '../src/utils/database/mmkv';
 
 export const useShareStore = create((set, get) => ({
   colors: Appearance.getColorScheme() === 'dark' ? COLOR_SCHEME_DARK : COLOR_SCHEME_LIGHT,

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

@@ -1,65 +0,0 @@
-import React from 'react';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTracked } from '../../provider';
-import { PressableButton } from '../PressableButton';
-import { SIZE } from '../../utils/SizeUtils';
-import { hexToRGBA, RGB_Linear_Shade } from '../../utils/ColorUtils';
-import { showTooltip, TOOLTIP_POSITIONS } from '../../utils';
-
-export const ActionIcon = ({
-  onPress,
-  name,
-  color,
-  customStyle,
-  size = SIZE.xxl,
-  iconStyle = {},
-  left = 10,
-  right = 10,
-  top = 30,
-  bottom = 10,
-  testID,
-  disabled,
-  onLongPress,
-  tooltipText,
-  type = 'gray',
-  fwdRef,
-  tooltipPosition = TOOLTIP_POSITIONS.TOP
-}) => {
-  const [state, dispatch] = useTracked();
-  const { colors } = state;
-
-  return (
-    <PressableButton
-      testID={testID}
-      fwdRef={fwdRef}
-      onPress={onPress}
-      hitSlop={{ top: top, left: left, right: right, bottom: bottom }}
-      onLongPress={event => {
-        if (onLongPress) {
-          onLongPress();
-          return;
-        }
-        if (tooltipText) {
-          showTooltip(event, tooltipText, tooltipPosition);
-        }
-      }}
-      disabled={disabled}
-      type={type}
-      customStyle={{
-        width: 40,
-        height: 40,
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: 100,
-        ...customStyle
-      }}
-    >
-      <Icon
-        name={name}
-        style={iconStyle}
-        color={disabled ? RGB_Linear_Shade(-0.05, hexToRGBA(colors.nav)) : color}
-        size={size}
-      />
-    </PressableButton>
-  );
-};

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

@@ -7,17 +7,17 @@ import { DDS } from '../../services/DeviceDetection';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eCloseAddNotebookDialog, eOpenAddNotebookDialog } from '../../utils/Events';
-import { ph, pv, SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Input from '../Input';
+import { eCloseAddNotebookDialog, eOpenAddNotebookDialog } from '../../utils/events';
+import { ph, pv, SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Input from '../ui/input';
 import { MoveNotes } from '../MoveNoteDialog/movenote';
-import Seperator from '../Seperator';
-import SheetWrapper from '../Sheet';
-import { Toast } from '../Toast';
+import Seperator from '../ui/seperator';
+import SheetWrapper from '../ui/sheet';
+import { Toast } from '../toast';
 
 let refs = [];
 
@@ -477,7 +477,7 @@ const TopicItem = ({ item, index, colors, onPress, onDelete }) => {
           justifyContent: 'flex-end'
         }}
       >
-        <ActionIcon
+        <IconButton
           onPress={() => {
             onPress(item, index);
           }}
@@ -485,7 +485,7 @@ const TopicItem = ({ item, index, colors, onPress, onDelete }) => {
           size={SIZE.lg - 5}
           color={colors.icon}
         />
-        <ActionIcon
+        <IconButton
           onPress={() => {
             onDelete(index);
           }}

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

@@ -5,15 +5,15 @@ import { useMenuStore } from '../../provider/stores';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eCloseAddTopicDialog, eOpenAddTopicDialog } from '../../utils/Events';
-import { sleep } from '../../utils/TimeUtils';
-import BaseDialog from '../Dialog/base-dialog';
-import DialogButtons from '../Dialog/dialog-buttons';
-import DialogContainer from '../Dialog/dialog-container';
-import DialogHeader from '../Dialog/dialog-header';
-import Input from '../Input';
-import Seperator from '../Seperator';
-import { Toast } from '../Toast';
+import { eCloseAddTopicDialog, eOpenAddTopicDialog } from '../../utils/events';
+import { sleep } from '../../utils/time';
+import BaseDialog from '../dialog/base-dialog';
+import DialogButtons from '../dialog/dialog-buttons';
+import DialogContainer from '../dialog/dialog-container';
+import DialogHeader from '../dialog/dialog-header';
+import Input from '../ui/input';
+import Seperator from '../ui/seperator';
+import { Toast } from '../toast';
 
 export class AddTopicDialog extends React.Component {
   constructor(props) {

apps/mobile/src/components/Announcements/announcement.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { FlatList, View } from 'react-native';
 import { useTracked } from '../../provider';
 import { useMessageStore, useSelectionStore } from '../../provider/stores';
-import { Button } from '../Button';
+import { Button } from '../ui/button';
 import { allowedOnPlatform, renderItem } from './functions';
 
 export const Announcement = ({ color }) => {

apps/mobile/src/components/Announcements/body.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTracked } from '../../provider';
-import Paragraph from '../Typography/Paragraph';
+import Paragraph from '../ui/typography/paragraph';
 import { getStyle } from './functions';
 
 export const Body = ({ text, style = {} }) => {

apps/mobile/src/components/Announcements/cta.js

@@ -2,14 +2,14 @@ import React from 'react';
 import { View } from 'react-native';
 import { useTracked } from '../../provider';
 import { eSendEvent, presentSheet } from '../../services/EventManager';
-import { eCloseAnnouncementDialog } from '../../utils/Events';
+import { eCloseAnnouncementDialog } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 import SettingsBackupAndRestore from '../../views/Settings/backup-restore';
-import { Button } from '../Button';
-import GeneralSheet from '../GeneralSheet';
-import { PricingPlans } from '../Premium/pricing-plans';
+import { Button } from '../ui/button';
+import SheetProvider from '../sheet-provider';
+import { PricingPlans } from '../premium/pricing-plans';
 import { allowedOnPlatform, getStyle } from './functions';
 
 export const Cta = ({ actions, style = {}, color, inline }) => {
@@ -53,7 +53,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
         ...getStyle(style)
       }}
     >
-      <GeneralSheet context="premium_cta" />
+      <SheetProvider context="premium_cta" />
       {buttons.length > 0 &&
         buttons.slice(0, 1).map(item => (
           <Button

apps/mobile/src/components/Announcements/description.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import Paragraph from '../ui/typography/paragraph';
 import { getStyle } from './functions';
 
 export const Description = ({ text, style = {} }) => {

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

@@ -4,8 +4,8 @@ import { useTracked } from '../../provider';
 import { useMessageStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { eCloseAnnouncementDialog, eOpenAnnouncementDialog } from '../../utils/Events';
-import BaseDialog from '../Dialog/base-dialog';
+import { eCloseAnnouncementDialog, eOpenAnnouncementDialog } from '../../utils/events';
+import BaseDialog from '../dialog/base-dialog';
 import { allowedOnPlatform, renderItem } from './functions';
 
 export const AnnouncementDialog = () => {

apps/mobile/src/components/Announcements/list.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
-import Paragraph from '../Typography/Paragraph';
+import Paragraph from '../ui/typography/paragraph';
 import { getStyle } from './functions';
 
 export const List = ({ items, listType, style = {} }) => {

apps/mobile/src/components/Announcements/subheading.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import Heading from '../Typography/Heading';
+import { SIZE } from '../../utils/size';
+import Heading from '../ui/typography/heading';
 import { getStyle } from './functions';
 
 export const SubHeading = ({ text, style = {} }) => {

apps/mobile/src/components/Announcements/title.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTracked } from '../../provider';
-import Heading from '../Typography/Heading';
+import Heading from '../ui/typography/heading';
 import { getStyle } from './functions';
 
 export const Title = ({ text, style = {} }) => {

apps/mobile/src/components/AttachmentDialog/attachmentitem.js

@@ -0,0 +1,186 @@
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import * as Progress from 'react-native-progress';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { useTracked } from '../../provider';
+import { useAttachmentStore } from '../../provider/stores';
+import { db } from '../../utils/database';
+import filesystem from '../../utils/filesystem';
+import { SIZE } from '../../utils/size';
+import SheetProvider from '../sheet-provider';
+import { IconButton } from '../ui/icon-button';
+import Paragraph from '../ui/typography/paragraph';
+
+function formatBytes(bytes, decimals = 2) {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+function getFileExtension(filename) {
+  var ext = /^.+\.([^.]+)$/.exec(filename);
+  return ext == null ? '' : ext[1];
+}
+
+export const AttachmentItem = ({ attachment, encryption }) => {
+  const [state] = useTracked();
+  const colors = state.colors;
+  const progress = useAttachmentStore(state => state.progress);
+  const [currentProgress, setCurrentProgress] = useState(
+    encryption
+      ? {
+          type: 'encrypt'
+        }
+      : null
+  );
+  const encryptionProgress = encryption
+    ? useAttachmentStore(state => state.encryptionProgress)
+    : null;
+
+  const onPress = async () => {
+    if (currentProgress) {
+      db.fs.cancel(attachment.metadata.hash, 'download');
+      useAttachmentStore.getState().remove(attachment.metadata.hash);
+      return;
+    }
+    filesystem.downloadAttachment(attachment.metadata.hash, false);
+  };
+
+  useEffect(() => {
+    let prog = progress[attachment.metadata.hash];
+    if (prog) {
+      let type = prog.type;
+      let loaded = prog.type === 'download' ? prog.recieved : prog.sent;
+      prog = loaded / prog.total;
+      prog = (prog * 100).toFixed(0);
+      console.log('progress: ', prog);
+      console.log(prog);
+      setCurrentProgress({
+        value: prog,
+        percent: prog + '%',
+        type: type
+      });
+    } else {
+      setCurrentProgress(null);
+    }
+  }, [progress]);
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        marginVertical: 5,
+        justifyContent: 'space-between',
+        padding: 12,
+        paddingVertical: 6,
+        borderRadius: 5,
+        backgroundColor: colors.nav
+      }}
+      type="grayBg"
+    >
+      <SheetProvider context={attachment.metadata.hash} />
+      <View
+        style={{
+          flexShrink: 1,
+          flexDirection: 'row',
+          alignItems: 'center'
+        }}
+      >
+        <View
+          style={{
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginLeft: -5
+          }}
+        >
+          <Icon name="file" size={SIZE.xxxl} color={colors.icon} />
+
+          <Paragraph
+            adjustsFontSizeToFit
+            size={6}
+            color={colors.light}
+            style={{
+              position: 'absolute'
+            }}
+          >
+            {getFileExtension(attachment.metadata.filename).toUpperCase()}
+          </Paragraph>
+        </View>
+
+        <View
+          style={{
+            flexShrink: 1,
+            marginLeft: 10
+          }}
+        >
+          <Paragraph
+            size={SIZE.sm - 1}
+            style={{
+              flexWrap: 'wrap',
+              marginBottom: 2.5
+            }}
+            numberOfLines={1}
+            lineBreakMode="middle"
+            color={colors.pri}
+          >
+            {attachment.metadata.filename}
+          </Paragraph>
+
+          <Paragraph color={colors.icon} size={SIZE.xs}>
+            {formatBytes(attachment.length)}{' '}
+            {currentProgress?.type ? '(' + currentProgress.type + 'ing - tap to cancel)' : ''}
+          </Paragraph>
+        </View>
+      </View>
+
+      {currentProgress || encryptionProgress || encryption ? (
+        <TouchableOpacity
+          activeOpacity={0.9}
+          onPress={() => {
+            if (encryption) return;
+            db.fs.cancel(attachment.metadata.hash);
+            setCurrentProgress(null);
+          }}
+          style={{
+            justifyContent: 'center',
+            marginLeft: 5,
+            marginTop: 5,
+            marginRight: -5
+          }}
+        >
+          <Progress.Circle
+            size={SIZE.xxl}
+            progress={
+              encryptionProgress
+                ? encryptionProgress
+                : currentProgress?.value
+                ? currentProgress?.value / 100
+                : 0
+            }
+            showsText
+            textStyle={{
+              fontSize: 10
+            }}
+            color={colors.accent}
+            formatText={progress => (progress * 100).toFixed(0)}
+            borderWidth={0}
+            thickness={2}
+          />
+        </TouchableOpacity>
+      ) : (
+        <IconButton
+          onPress={() => !encryption && onPress(attachment)}
+          name="download"
+          size={SIZE.lg}
+          color={colors.pri}
+        />
+      )}
+    </View>
+  );
+};

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

@@ -1,20 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
-import * as Progress from 'react-native-progress';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
-import { useAttachmentStore } from '../../provider/stores';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { db } from '../../utils/database';
-import { eCloseAttachmentDialog, eOpenAttachmentsDialog } from '../../utils/Events';
-import filesystem from '../../utils/filesystem';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import SheetWrapper from '../Sheet';
-import DialogHeader from '../Dialog/dialog-header';
-import GeneralSheet from '../GeneralSheet';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseAttachmentDialog, eOpenAttachmentsDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import DialogHeader from '../dialog/dialog-header';
+import SheetWrapper from '../ui/sheet';
+import Paragraph from '../ui/typography/paragraph';
+import { AttachmentItem } from './attachment-item';
 export const AttachmentDialog = () => {
   const [state] = useTracked();
   const colors = state.colors;
@@ -89,7 +85,7 @@ export const AttachmentDialog = () => {
           }
           data={attachments}
           renderItem={({ item, index }) => (
-            <Attachment attachment={item} note={note} setNote={setNote} />
+            <AttachmentItem attachment={item} note={note} setNote={setNote} />
           )}
         />
 
@@ -108,177 +104,3 @@ export const AttachmentDialog = () => {
     </SheetWrapper>
   );
 };
-
-function formatBytes(bytes, decimals = 2) {
-  if (bytes === 0) return '0 Bytes';
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-}
-
-function getFileExtension(filename) {
-  var ext = /^.+\.([^.]+)$/.exec(filename);
-  return ext == null ? '' : ext[1];
-}
-
-export const Attachment = ({ attachment, encryption }) => {
-  const [state] = useTracked();
-  const colors = state.colors;
-  const progress = useAttachmentStore(state => state.progress);
-  const [currentProgress, setCurrentProgress] = useState(
-    encryption
-      ? {
-          type: 'encrypt'
-        }
-      : null
-  );
-  const encryptionProgress = encryption
-    ? useAttachmentStore(state => state.encryptionProgress)
-    : null;
-
-  const onPress = async () => {
-    if (currentProgress) {
-      db.fs.cancel(attachment.metadata.hash, 'download');
-      useAttachmentStore.getState().remove(attachment.metadata.hash);
-      return;
-    }
-    filesystem.downloadAttachment(attachment.metadata.hash, false);
-  };
-
-  useEffect(() => {
-    let prog = progress[attachment.metadata.hash];
-    if (prog) {
-      let type = prog.type;
-      let loaded = prog.type === 'download' ? prog.recieved : prog.sent;
-      prog = loaded / prog.total;
-      prog = (prog * 100).toFixed(0);
-      console.log('progress: ', prog);
-      console.log(prog);
-      setCurrentProgress({
-        value: prog,
-        percent: prog + '%',
-        type: type
-      });
-    } else {
-      setCurrentProgress(null);
-    }
-  }, [progress]);
-
-  return (
-    <View
-      style={{
-        flexDirection: 'row',
-        marginVertical: 5,
-        justifyContent: 'space-between',
-        padding: 12,
-        paddingVertical: 6,
-        borderRadius: 5,
-        backgroundColor: colors.nav
-      }}
-      type="grayBg"
-    >
-      <GeneralSheet context={attachment.metadata.hash} />
-      <View
-        style={{
-          flexShrink: 1,
-          flexDirection: 'row',
-          alignItems: 'center'
-        }}
-      >
-        <View
-          style={{
-            justifyContent: 'center',
-            alignItems: 'center',
-            marginLeft: -5
-          }}
-        >
-          <Icon name="file" size={SIZE.xxxl} color={colors.icon} />
-
-          <Paragraph
-            adjustsFontSizeToFit
-            size={6}
-            color={colors.light}
-            style={{
-              position: 'absolute'
-            }}
-          >
-            {getFileExtension(attachment.metadata.filename).toUpperCase()}
-          </Paragraph>
-        </View>
-
-        <View
-          style={{
-            flexShrink: 1,
-            marginLeft: 10
-          }}
-        >
-          <Paragraph
-            size={SIZE.sm - 1}
-            style={{
-              flexWrap: 'wrap',
-              marginBottom: 2.5
-            }}
-            numberOfLines={1}
-            lineBreakMode="middle"
-            color={colors.pri}
-          >
-            {attachment.metadata.filename}
-          </Paragraph>
-
-          <Paragraph color={colors.icon} size={SIZE.xs}>
-            {formatBytes(attachment.length)}{' '}
-            {currentProgress?.type ? '(' + currentProgress.type + 'ing - tap to cancel)' : ''}
-          </Paragraph>
-        </View>
-      </View>
-
-      {currentProgress || encryptionProgress || encryption ? (
-        <TouchableOpacity
-          activeOpacity={0.9}
-          onPress={() => {
-            if (encryption) return;
-            db.fs.cancel(attachment.metadata.hash);
-            setCurrentProgress(null);
-          }}
-          style={{
-            justifyContent: 'center',
-            marginLeft: 5,
-            marginTop: 5,
-            marginRight: -5
-          }}
-        >
-          <Progress.Circle
-            size={SIZE.xxl}
-            progress={
-              encryptionProgress
-                ? encryptionProgress
-                : currentProgress?.value
-                ? currentProgress?.value / 100
-                : 0
-            }
-            showsText
-            textStyle={{
-              fontSize: 10
-            }}
-            color={colors.accent}
-            formatText={progress => (progress * 100).toFixed(0)}
-            borderWidth={0}
-            thickness={2}
-          />
-        </TouchableOpacity>
-      ) : (
-        <ActionIcon
-          onPress={() => !encryption && onPress(attachment)}
-          name="download"
-          size={SIZE.lg}
-          color={colors.pri}
-        />
-      )}
-    </View>
-  );
-};

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

@@ -1,83 +0,0 @@
-import React, { Component } from 'react';
-import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { getCurrentColors } from '../../utils/Colors';
-import { eThemeUpdated } from '../../utils/Events';
-import { EditorSettings } from '../../views/Editor/EditorSettings';
-import { AddNotebookDialog } from '../AddNotebookDialog';
-import { AddTopicDialog } from '../AddTopicDialog';
-import { AnnouncementDialog } from '../Announcements';
-import { AttachmentDialog } from '../AttachmentDialog';
-import { Dialog } from '../Dialog';
-import ExportDialog from '../ExportDialog';
-import GeneralSheet from '../GeneralSheet';
-import ImagePreview from '../ImagePreview';
-import Auth from '../Auth';
-import { SessionExpired } from '../Auth/session-expired';
-import MergeEditor from '../MergeEditor';
-import MoveNoteDialog from '../MoveNoteDialog';
-import PremiumDialog from '../Premium';
-import { Expiring } from '../Premium/expiring';
-import PublishNoteDialog from '../PublishNoteDialog';
-import RateDialog from '../RateDialog';
-import RecoveryKeyDialog from '../RecoveryKeyDialog';
-import RestoreDialog from '../RestoreDialog';
-import ResultDialog from '../ResultDialog';
-import TagsDialog from '../TagsDialog';
-import { VaultDialog } from '../VaultDialog';
-
-export class DialogManager extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      colors: getCurrentColors()
-    };
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return JSON.stringify(nextProps) !== JSON.stringify(this.props) || nextState !== this.state;
-  }
-
-  onThemeChange = () => {
-    this.setState({
-      colors: getCurrentColors()
-    });
-  };
-
-  componentDidMount() {
-    eSubscribeEvent(eThemeUpdated, this.onThemeChange);
-  }
-
-  componentWillUnmount() {
-    eUnSubscribeEvent(eThemeUpdated, this.onThemeChange);
-  }
-
-  render() {
-    let { colors } = this.state;
-    return (
-      <>
-        <Dialog context="global" />
-        <AddTopicDialog colors={colors} />
-        <AddNotebookDialog colors={colors} />
-        <PremiumDialog colors={colors} />
-        <Auth colors={colors} />
-        <MergeEditor />
-        <ExportDialog />
-        <RecoveryKeyDialog colors={colors} />
-        <GeneralSheet />
-        <RestoreDialog />
-        <ResultDialog />
-        <VaultDialog colors={colors} />
-        <MoveNoteDialog colors={colors} />
-        <RateDialog />
-        <ImagePreview />
-        <EditorSettings />
-        <PublishNoteDialog />
-        <TagsDialog />
-        <AttachmentDialog />
-        <Expiring />
-        <AnnouncementDialog />
-        <SessionExpired />
-      </>
-    );
-  }
-}

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

@@ -8,18 +8,18 @@ import { useTracked } from '../../provider';
 import { ToastEvent } from '../../services/EventManager';
 import Exporter from '../../services/Exporter';
 import { getElevation } from '../../utils';
-import { ph, pv, SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import SheetWrapper from '../Sheet';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import { PressableButton } from '../PressableButton';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { ph, pv, SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import SheetWrapper from '../ui/sheet';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import { PressableButton } from '../ui/pressable';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 const { eSubscribeEvent, eUnSubscribeEvent } = require('../../services/EventManager');
-const { eOpenExportDialog, eCloseExportDialog } = require('../../utils/Events');
+const { eOpenExportDialog, eCloseExportDialog } = require('../../utils/events');
 
 const ExportDialog = () => {
   const [state] = useTracked();

apps/mobile/src/components/ExportDialog/share.js

@@ -3,8 +3,8 @@ import { View } from 'react-native';
 import FileViewer from 'react-native-file-viewer';
 import Share from 'react-native-share';
 import { ToastEvent } from '../../services/EventManager';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
 
 export const ShareComponent = ({ uri, name, padding }) => {
   return (

apps/mobile/src/components/Github/issue.js

@@ -7,15 +7,15 @@ import { eSendEvent, ToastEvent } from '../../services/EventManager';
 import PremiumService from '../../services/PremiumService';
 import { APP_VERSION } from '../../../version';
 import { db } from '../../utils/database';
-import { eCloseProgressDialog } from '../../utils/Events';
+import { eCloseProgressDialog } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import { presentDialog } from '../Dialog/functions';
-import Seperator from '../Seperator';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import { presentDialog } from '../dialog/functions';
+import Seperator from '../ui/seperator';
+import Paragraph from '../ui/typography/paragraph';
 import deviceInfoModule from 'react-native-device-info';
 
 export const Issue = () => {

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

@@ -1,17 +1,17 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, View } from 'react-native';
-import BaseDialog from '../../components/Dialog/base-dialog';
-import { PressableButton } from '../../components/PressableButton';
-import Seperator from '../../components/Seperator';
+import BaseDialog from '../dialog/base-dialog';
+import { PressableButton } from '../ui/pressable';
+import Seperator from '../ui/seperator';
 import { useTracked } from '../../provider';
 import { useMessageStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { getElevation } from '../../utils';
-import { eCloseJumpToDialog, eOpenJumpToDialog, eScrollEvent } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseJumpToDialog, eOpenJumpToDialog, eScrollEvent } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 const offsets = [];
 let timeout = null;

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

@@ -1,69 +0,0 @@
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { SvgXml } from 'react-native-svg';
-import {
-  FAV_SVG,
-  LOGIN_SVG,
-  LOGO_SVG,
-  NOTEBOOK_SVG,
-  NOTE_SVG,
-  SEARCH_SVG,
-  SETTINGS_SVG,
-  TAG_SVG,
-  TOPIC_SVG,
-  TRASH_SVG
-} from '../../assets/images/assets';
-import { useTracked } from '../../provider';
-export const Placeholder = ({ type, w, h, color }) => {
-  const [state, dispatch] = useTracked();
-  const { colors } = state;
-  const getSVG = () => {
-    switch (type) {
-      case 'notes':
-        return NOTE_SVG(color || colors.accent);
-      case 'notebooks':
-        return NOTEBOOK_SVG(colors.accent);
-      case 'topics':
-        return TOPIC_SVG(colors.accent);
-      case 'tags':
-        return TAG_SVG(colors.accent);
-      case 'favorites':
-        return FAV_SVG(colors.accent);
-      case 'trash':
-        return TRASH_SVG(colors.accent);
-      case 'settings':
-        return SETTINGS_SVG(colors.accent);
-      case 'search':
-        return SEARCH_SVG(colors.accent);
-      case 'login':
-        return LOGIN_SVG(colors.accent);
-      case 'signup':
-        return LOGO_SVG;
-    }
-  };
-
-  return (
-    <SvgToPngView
-      color={type === 'notes' ? color || colors.accent : colors.accent}
-      src={getSVG()}
-      img={type}
-      width={w}
-      height={h}
-    />
-  );
-};
-
-export const SvgToPngView = ({ width = 250, height = 250, src }) => {
-  const [error, setError] = useState(false);
-
-  return (
-    <View
-      style={{
-        height: width || 250,
-        width: height || 250
-      }}
-    >
-      <SvgXml xml={src} width="100%" height="100%" />
-    </View>
-  );
-};

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

@@ -1,80 +0,0 @@
-import React from 'react';
-import { ActivityIndicator, StyleSheet, View } from 'react-native';
-import { useTracked } from '../../provider';
-import { ph, pv, SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import Paragraph from '../Typography/Paragraph';
-
-export const Loading = ({
-  height = 150,
-  tagline = 'Loading....',
-  done = false,
-  doneText = 'Action completed successfully!',
-  onDone = () => {},
-  customStyle = {}
-}) => {
-  const [state, dispatch] = useTracked();
-  const { colors } = state;
-
-  return (
-    <View
-      style={[
-        { height: height, backgroundColor: colors.bg },
-        styles.activityContainer,
-        customStyle
-      ]}
-    >
-      {done ? (
-        <>
-          <Paragraph color={colors.icon} size={SIZE.xs} style={styles.activityText}>
-            {doneText}
-          </Paragraph>
-
-          <Button onPress={onDone} title="Open file" />
-        </>
-      ) : (
-        <>
-          <ActivityIndicator color={colors.accent} />
-          <Paragraph
-            size={SIZE.md}
-            style={{
-              marginTop: 10
-            }}
-            color={colors.pri}
-          >
-            {tagline}
-          </Paragraph>
-        </>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  activityText: {
-    fontSize: SIZE.sm,
-    textAlign: 'center',
-    marginBottom: 10
-  },
-  activityContainer: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  button: {
-    paddingVertical: pv,
-    paddingHorizontal: ph,
-    marginTop: 10,
-    borderRadius: 5,
-    alignSelf: 'center',
-    width: '48%',
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderWidth: 1,
-    flexDirection: 'row'
-  },
-  buttonText: {
-    //fontFamily: "sans-serif",
-    color: 'white',
-    fontSize: SIZE.sm
-  }
-});

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

@@ -4,14 +4,14 @@ import { useTracked } from '../../provider';
 import { useMenuStore, useNoteStore } from '../../provider/stores';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { COLORS_NOTE } from '../../utils/Colors';
+import { COLORS_NOTE } from '../../utils/color-scheme';
 import { db } from '../../utils/database';
-import { refreshNotesPage } from '../../utils/Events';
-import { normalize, SIZE } from '../../utils/SizeUtils';
-import { presentDialog } from '../Dialog/functions';
-import { PressableButton } from '../PressableButton';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { refreshNotesPage } from '../../utils/events';
+import { normalize, SIZE } from '../../utils/size';
+import { presentDialog } from '../dialog/functions';
+import { PressableButton } from '../ui/pressable';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const ColorSection = () => {
   const colorNotes = useMenuStore(state => state.colorNotes);

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

@@ -1,22 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { timeSince } from '../../utils/TimeUtils';
-import Paragraph from '../Typography/Paragraph';
-
-export const TimeSince = ({ time, style, updateFrequency = 30000 }) => {
-  const [timeAgo, setTimeAgo] = useState(null);
-
-  useEffect(() => {
-    let t = timeSince(time || Date.now());
-    setTimeAgo(t);
-    let interval = setInterval(() => {
-      t = timeSince(time);
-      setTimeAgo(t);
-    }, updateFrequency);
-    return () => {
-      clearInterval(interval);
-      interval = null;
-    };
-  }, [time, updateFrequency]);
-
-  return <Paragraph style={style}>{timeAgo}</Paragraph>;
-};

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

@@ -17,19 +17,19 @@ import Navigation from '../../services/Navigation';
 import Sync from '../../services/Sync';
 import { dHeight } from '../../utils';
 import { db } from '../../utils/database';
-import { eApplyChanges, eShowMergeDialog, refreshNotesPage } from '../../utils/Events';
+import { eApplyChanges, eShowMergeDialog, refreshNotesPage } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { normalize, SIZE } from '../../utils/SizeUtils';
-import { timeConverter } from '../../utils/TimeUtils';
+import { normalize, SIZE } from '../../utils/size';
+import { timeConverter } from '../../utils/time';
 import { getNote, sourceUri, updateNoteInEditor } from '../../views/Editor/Functions';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import DialogButtons from '../Dialog/dialog-buttons';
-import DialogContainer from '../Dialog/dialog-container';
-import DialogHeader from '../Dialog/dialog-header';
-import Seperator from '../Seperator';
-import Paragraph from '../Typography/Paragraph';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import BaseDialog from '../dialog/base-dialog';
+import DialogButtons from '../dialog/dialog-buttons';
+import DialogContainer from '../dialog/dialog-container';
+import DialogHeader from '../dialog/dialog-header';
+import Seperator from '../ui/seperator';
+import Paragraph from '../ui/typography/paragraph';
 
 const primaryWebView = createRef();
 const secondaryWebView = createRef();
@@ -324,7 +324,7 @@ const MergeEditor = () => {
                 flexShrink: 1
               }}
             >
-              <ActionIcon onPress={close} color={colors.pri} name="arrow-left" />
+              <IconButton onPress={close} color={colors.pri} name="arrow-left" />
               <Paragraph style={{ flexWrap: 'wrap' }} color={colors.icon} size={SIZE.xs}>
                 <Text style={{ color: colors.accent, fontWeight: 'bold' }}>(This Device)</Text>
                 {'\n'}

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

@@ -8,19 +8,19 @@ import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/E
 import Navigation from '../../services/Navigation';
 import { getTotalNotes } from '../../utils';
 import { db } from '../../utils/database';
-import { eOpenMoveNoteDialog } from '../../utils/Events';
+import { eOpenMoveNoteDialog } from '../../utils/events';
 import layoutmanager from '../../utils/layout-manager';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { Dialog } from '../Dialog';
-import DialogHeader from '../Dialog/dialog-header';
-import { presentDialog } from '../Dialog/functions';
-import Input from '../Input';
-import { PressableButton } from '../PressableButton';
-import SheetWrapper from '../Sheet';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import { Dialog } from '../dialog';
+import DialogHeader from '../dialog/dialog-header';
+import { presentDialog } from '../dialog/functions';
+import Input from '../ui/input';
+import { PressableButton } from '../ui/pressable';
+import SheetWrapper from '../ui/sheet';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 let newNotebookTitle = null;
 const notebookInput = createRef();
@@ -332,7 +332,7 @@ const MoveNoteComponent = ({ close, note, setNote }) => {
                     ) : null}
                   </View>
 
-                  <ActionIcon
+                  <IconButton
                     name={expanded === item.id ? 'plus' : 'chevron-down'}
                     color={expanded === item.id ? colors.accent : colors.pri}
                     size={SIZE.xl}

apps/mobile/src/components/MoveNoteDialog/movenote.tsx

@@ -6,17 +6,17 @@ import { useTracked } from '../../provider';
 import { eSendEvent, presentSheet, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eCloseProgressDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { Dialog } from '../Dialog';
-import DialogHeader from '../Dialog/dialog-header';
-import { presentDialog } from '../Dialog/functions';
-import { PressableButton } from '../PressableButton';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseProgressDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import { Dialog } from '../dialog';
+import DialogHeader from '../dialog/dialog-header';
+import { presentDialog } from '../dialog/functions';
+import { PressableButton } from '../ui/pressable';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const MoveNotes = ({
   notebook,
@@ -31,7 +31,7 @@ export const MoveNotes = ({
   const colors = state.colors;
   const [currentNotebook, setCurrentNotebook] = useState(notebook);
 
-  let notes = db.notes.all;
+  let notes = db.notes?.all;
 
   const [selectedNoteIds, setSelectedNoteIds] = useState<String[]>([]);
   const [topic, setTopic] = useState(selectedTopic);
@@ -80,8 +80,8 @@ export const MoveNotes = ({
       });
       return false;
     }
-    await db.notebooks.notebook(currentNotebook.id).topics.add(value);
-    setCurrentNotebook(db.notebooks.notebook(currentNotebook.id).data);
+    await db.notebooks?.notebook(currentNotebook.id).topics.add(value);
+    setCurrentNotebook(db.notebooks?.notebook(currentNotebook.id).data);
     Navigation.setRoutesToUpdate([
       Navigation.routeNames.NotesPage,
       Navigation.routeNames.Favorites,
@@ -139,7 +139,7 @@ export const MoveNotes = ({
         ) : null}
 
         {selectedNoteIds.indexOf(item.id) > -1 ? (
-          <ActionIcon
+          <IconButton
             customStyle={{
               width: null,
               height: null,
@@ -262,7 +262,7 @@ export const MoveNotes = ({
         <Button
           //@ts-ignore
           onPress={async () => {
-            await db.notes.move(
+            await db.notes?.move(
               {
                 topic: topic.id,
                 id: topic.notebookId
@@ -289,6 +289,8 @@ export const MoveNotes = ({
 
 MoveNotes.present = (notebook: any, topic: any) => {
   presentSheet({
-    component: ref => <MoveNotes fwdRef={ref} notebook={notebook} selectedTopic={topic} />
+    component: (ref: RefObject<ActionSheet>) => (
+      <MoveNotes fwdRef={ref} notebook={notebook} selectedTopic={topic} />
+    )
   });
 };

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

@@ -6,13 +6,13 @@ import { useTracked } from '../../provider';
 import { presentSheet } from '../../services/EventManager';
 import { db } from '../../utils/database';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { timeConverter, timeSince } from '../../utils/TimeUtils';
-import DialogHeader from '../Dialog/dialog-header';
-import GeneralSheet from '../GeneralSheet';
-import { PressableButton } from '../PressableButton';
-import Seperator from '../Seperator';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { timeConverter, timeSince } from '../../utils/time';
+import DialogHeader from '../dialog/dialog-header';
+import SheetProvider from '../sheet-provider';
+import { PressableButton } from '../ui/pressable';
+import Seperator from '../ui/seperator';
+import Paragraph from '../ui/typography/paragraph';
 import NotePreview from './preview';
 
 export default function NoteHistory({ note, ref }) {
@@ -82,7 +82,7 @@ export default function NoteHistory({ note, ref }) {
 
   return (
     <View>
-      <GeneralSheet context="note_history" />
+      <SheetProvider context="note_history" />
       <DialogHeader
         title="Note history"
         paragraph="Revert back to an older version of this note"

apps/mobile/src/components/NoteHistory/preview.js

@@ -6,15 +6,15 @@ import { useEditorStore } from '../../provider/stores';
 import { eSendEvent, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eCloseProgressDialog, eOnLoadNote } from '../../utils/Events';
+import { eCloseProgressDialog, eOnLoadNote } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { normalize } from '../../utils/SizeUtils';
+import { normalize } from '../../utils/size';
 import { getNote, sourceUri } from '../../views/Editor/Functions';
 import tiny from '../../views/Editor/tiny/tiny';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Paragraph from '../Typography/Paragraph';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Paragraph from '../ui/typography/paragraph';
 
 export default function NotePreview({ session, content }) {
   const [state] = useTracked();

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

@@ -7,16 +7,16 @@ import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
 import { eSendEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
-import { COLORS_NOTE } from '../../utils/Colors';
+import { COLORS_NOTE } from '../../utils/color-scheme';
 import { db } from '../../utils/database';
-import { refreshNotesPage } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { TimeSince } from '../Menu/TimeSince';
-import { Properties } from '../Properties';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { refreshNotesPage } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import { TimeSince } from '../side-menu/TimeSince';
+import { Properties } from '../properties';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 const navigateToTopic = topic => {
   let routeName = 'NotesPage';
@@ -282,7 +282,7 @@ const NoteItem = ({ item, isTrash, tags, dateBy = 'dateCreated', noOpen = false
           )}
         </View>
       </View>
-      <ActionIcon
+      <IconButton
         testID={notesnook.listitem.menu}
         color={colors.pri}
         name="dots-horizontal"

apps/mobile/src/components/Properties/useActions.js

@@ -31,7 +31,7 @@ import {
   COLOR_SCHEME_LIGHT,
   COLOR_SCHEME_PITCH_BLACK,
   setColorScheme
-} from '../../utils/Colors';
+} from '../../utils/color-scheme';
 import { db } from '../../utils/database';
 import {
   eOpenAddNotebookDialog,
@@ -41,11 +41,11 @@ import {
   eOpenLoginDialog,
   eOpenMoveNoteDialog,
   eOpenPublishNoteDialog
-} from '../../utils/Events';
+} from '../../utils/events';
 import { deleteItems } from '../../utils/functions';
-import { MMKV } from '../../utils/mmkv';
-import { sleep } from '../../utils/TimeUtils';
-import { presentDialog } from '../Dialog/functions';
+import { MMKV } from '../../utils/database/mmkv';
+import { sleep } from '../../utils/time';
+import { presentDialog } from '../dialog/functions';
 import { MoveNotes } from '../MoveNoteDialog/movenote';
 import NoteHistory from '../NoteHistory';
 import tiny from '../../views/Editor/tiny/tiny.js';

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

@@ -6,17 +6,17 @@ import { useTracked } from '../../provider';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eClosePublishNoteDialog, eOpenPublishNoteDialog } from '../../utils/Events';
+import { eClosePublishNoteDialog, eOpenPublishNoteDialog } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import SheetWrapper from '../Sheet';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Input from '../Input';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import SheetWrapper from '../ui/sheet';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Input from '../ui/input';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { useAttachmentStore } from '../../provider/stores';
 import { editing } from '../../utils';
 
@@ -203,7 +203,7 @@ const PublishNoteDialog = () => {
                   </Paragraph>
                 </View>
 
-                <ActionIcon
+                <IconButton
                   onPress={() => {
                     Clipboard.setString(publishUrl);
                     ToastEvent.show({
@@ -232,7 +232,7 @@ const PublishNoteDialog = () => {
                 marginBottom: 10
               }}
             >
-              <ActionIcon
+              <IconButton
                 onPress={() => {
                   if (publishing) return;
                   setIsLocked(!isLocked);
@@ -265,7 +265,7 @@ const PublishNoteDialog = () => {
                 alignItems: 'center'
               }}
             >
-              <ActionIcon
+              <IconButton
                 onPress={() => {
                   setSelfDestruct(!selfDestruct);
                 }}

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

@@ -1,15 +1,15 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Linking, Platform, View } from 'react-native';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { eCloseRateDialog, eOpenRateDialog } from '../../utils/Events';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import SheetWrapper from '../Sheet';
-import { Button } from '../Button';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
-import { STORE_LINK } from '../../utils';
+import { eCloseRateDialog, eOpenRateDialog } from '../../utils/events';
+import { MMKV } from '../../utils/database/mmkv';
+import { SIZE } from '../../utils/size';
+import SheetWrapper from '../ui/sheet';
+import { Button } from '../ui/button';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
+import { STORE_LINK } from '../../utils/constants';
 import { clearMessage } from '../../services/Message';
 
 const RateDialog = () => {

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

@@ -1,31 +1,25 @@
+import Clipboard from '@react-native-clipboard/clipboard';
 import React, { createRef } from 'react';
 import { Platform, View } from 'react-native';
+import FileViewer from 'react-native-file-viewer';
 import QRCode from 'react-native-qrcode-svg';
+import * as ScopedStorage from 'react-native-scoped-storage';
 import Share from 'react-native-share';
 import { LOGO_BASE64 } from '../../assets/images/assets';
-import Clipboard from '@react-native-clipboard/clipboard';
-import {
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent,
-  ToastEvent
-} from '../../services/EventManager';
-import { db } from '../../utils/database';
-import { eOpenRecoveryKeyDialog, eOpenResultDialog } from '../../utils/Events';
-import { sanitizeFilename } from '../../utils/filename';
-import { SIZE } from '../../utils/SizeUtils';
-import Storage from '../../utils/storage';
-import { sleep } from '../../utils/TimeUtils';
-import SheetWrapper from '../Sheet';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Seperator from '../Seperator';
-import Paragraph from '../Typography/Paragraph';
-import FileViewer from 'react-native-file-viewer';
-
-import * as ScopedStorage from 'react-native-scoped-storage';
-import { MMKV } from '../../utils/mmkv';
+import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import { clearMessage } from '../../services/Message';
+import { db } from '../../utils/database';
+import { eOpenRecoveryKeyDialog } from '../../utils/events';
+import { MMKV } from '../../utils/database/mmkv';
+import { sanitizeFilename } from '../../utils/sanitizer';
+import { SIZE } from '../../utils/size';
+import Storage from '../../utils/database/storage';
+import { sleep } from '../../utils/time';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Seperator from '../ui/seperator';
+import SheetWrapper from '../ui/sheet';
+import Paragraph from '../ui/typography/paragraph';
 
 let RNFetchBlob;
 

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

@@ -6,21 +6,21 @@ import { useTracked } from '../../provider';
 import { initialize } from '../../provider/stores';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import { db } from '../../utils/database';
-import { eCloseRestoreDialog, eOpenRestoreDialog } from '../../utils/Events';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import storage from '../../utils/storage';
-import { sleep, timeConverter } from '../../utils/TimeUtils';
-import SheetWrapper from '../Sheet';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Seperator from '../Seperator';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseRestoreDialog, eOpenRestoreDialog } from '../../utils/events';
+import { MMKV } from '../../utils/database/mmkv';
+import { SIZE } from '../../utils/size';
+import storage from '../../utils/database/storage';
+import { sleep, timeConverter } from '../../utils/time';
+import SheetWrapper from '../ui/sheet';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Seperator from '../ui/seperator';
+import Paragraph from '../ui/typography/paragraph';
 import * as ScopedStorage from 'react-native-scoped-storage';
-import { Dialog } from '../Dialog';
+import { Dialog } from '../dialog';
 import { verifyUser } from '../../views/Settings/functions';
-import { presentDialog } from '../Dialog/functions';
-import { Toast } from '../Toast';
+import { presentDialog } from '../dialog/functions';
+import { Toast } from '../toast';
 
 const actionSheetRef = createRef();
 let RNFetchBlob;

apps/mobile/src/components/ResultDialog/ProFeatures.js

@@ -3,10 +3,10 @@ import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
 import { eSendEvent } from '../../services/EventManager';
-import { eCloseProgressDialog, eCloseResultDialog, eOpenPremiumDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseProgressDialog, eCloseResultDialog, eOpenPremiumDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import Paragraph from '../ui/typography/paragraph';
 export const ProFeatures = ({ count = 6 }) => {
   const [state, dispatch] = useTracked();
   const { colors } = state;

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

@@ -4,13 +4,13 @@ import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { getElevation } from '../../utils';
-import { eCloseResultDialog, eOpenResultDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseResultDialog, eOpenResultDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import BaseDialog from '../dialog/base-dialog';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { ProFeatures } from './pro-features';
 
 const ResultDialog = () => {

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

@@ -1,258 +0,0 @@
-import React from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
-
-const Circle = ({ size, color, position }) => {
-  let style = {
-    wrapper: {
-      flexDirection: 'row',
-      ...position
-    },
-    circle: {
-      width: size,
-      height: size,
-      borderRadius: size / 2,
-      backgroundColor: color
-    }
-  };
-  return (
-    <View style={style.wrapper}>
-      <View style={style.circle} />
-    </View>
-  );
-};
-
-const Donut = ({ size, color, position }) => {
-  let style = {
-    wrapper: {
-      flexDirection: 'row',
-      ...position
-    },
-    donut: {
-      width: size,
-      height: size,
-      borderRadius: size / 2,
-      borderWidth: size / 4,
-      borderColor: color
-    }
-  };
-  return (
-    <View style={style.wrapper}>
-      <View style={style.donut} />
-    </View>
-  );
-};
-
-const Triangle = ({ size, color, position }) => {
-  let style = {
-    wrapper: {
-      flexDirection: 'row',
-      ...position
-    },
-    triangle: {
-      width: 0,
-      height: 0,
-      backgroundColor: 'transparent',
-      borderStyle: 'solid',
-      borderLeftWidth: size / 2,
-      borderRightWidth: size / 2,
-      borderBottomWidth: size,
-      borderLeftColor: 'transparent',
-      borderRightColor: 'transparent',
-      borderBottomColor: color,
-      transform: [{ rotate: '180deg' }]
-    }
-  };
-  return (
-    <View style={style.wrapper}>
-      <View style={style.triangle} />
-    </View>
-  );
-};
-
-const DiamondNarrow = ({ size, color, position }) => {
-  let style = {
-    wrapper: {
-      flexDirection: 'row',
-      ...position
-    },
-    diamondNarrow: {},
-    diamondNarrowTop: {
-      width: 0,
-      height: 0,
-      borderTopWidth: 0,
-      borderTopColor: 'transparent',
-      borderLeftColor: 'transparent',
-      borderLeftWidth: size / 2,
-      borderRightColor: 'transparent',
-      borderRightWidth: size / 2,
-      borderBottomColor: color,
-      borderBottomWidth: size / 1.42
-    },
-    diamondNarrowBottom: {
-      width: 0,
-      height: 0,
-      borderTopWidth: size / 1.42,
-      borderTopColor: color,
-      borderLeftColor: 'transparent',
-      borderLeftWidth: size / 2,
-      borderRightColor: 'transparent',
-      borderRightWidth: size / 2,
-      borderBottomColor: 'transparent',
-      borderBottomWidth: 0
-    }
-  };
-  return (
-    <View style={style.wrapper}>
-      <View style={style.diamondNarrow}>
-        <View style={style.diamondNarrowTop} />
-        <View style={style.diamondNarrowBottom} />
-      </View>
-    </View>
-  );
-};
-
-const CutDiamond = ({ size, color, position }) => {
-  let style = {
-    wrapper: {
-      flexDirection: 'row',
-      ...position
-    },
-    cutDiamond: {},
-    cutDiamondTop: {
-      width: size,
-      height: 0,
-      borderTopWidth: 0,
-      borderTopColor: 'transparent',
-      borderLeftColor: 'transparent',
-      borderLeftWidth: size / 4,
-      borderRightColor: 'transparent',
-      borderRightWidth: size / 4,
-      borderBottomColor: color,
-      borderBottomWidth: size / 4
-    },
-    cutDiamondBottom: {
-      width: 0,
-      height: 0,
-      borderTopWidth: size / 1.42,
-      borderTopColor: color,
-      borderLeftColor: 'transparent',
-      borderLeftWidth: size / 2,
-      borderRightColor: 'transparent',
-      borderRightWidth: size / 2,
-      borderBottomColor: 'transparent',
-      borderBottomWidth: 0
-    }
-  };
-  return (
-    <View style={style.wrapper}>
-      <View style={style.cutDiamond}>
-        <View style={style.cutDiamondTop} />
-        <View style={style.cutDiamondBottom} />
-      </View>
-    </View>
-  );
-};
-
-const Shapes = ({ primaryColor, secondaryColor, height, figures, borderRadius, style }) => {
-  const config = {
-    primaryColor: primaryColor || '#416DF8',
-    secondaryColor: secondaryColor || '#2F53D5',
-    height: Dimensions.get('window').height / (height || 3.5),
-    sizefigure: 100,
-    figures: figures || [
-      { name: 'circle', position: 'center', size: 60 },
-      { name: 'donut', position: 'flex-start', axis: 'top', size: 80 },
-      { name: 'circle', position: 'center', axis: 'right', size: 100 }
-    ],
-    borderRadius: borderRadius !== undefined ? borderRadius : 30
-  };
-
-  const arrFigures = [];
-  const buildFigures = () => {
-    config.figures.forEach((e, i) => {
-      let position = {
-        alignItems: e.position
-      };
-
-      const sizefigure = e.size || config.sizefigure;
-
-      switch (e.axis) {
-        case 'left':
-          position.left = -sizefigure / 2;
-          break;
-        case 'right':
-          position.right = -sizefigure / 2;
-          break;
-        case 'top':
-          position.top = -sizefigure / 2;
-          break;
-        case 'bottom':
-          position.bottom = -sizefigure / 2;
-          break;
-        default:
-          break;
-      }
-
-      if (e.name === 'circle') {
-        arrFigures.push(
-          <Circle key={i} size={sizefigure} color={config.secondaryColor} position={position} />
-        );
-      }
-      if (e.name === 'donut') {
-        arrFigures.push(
-          <Donut key={i} size={sizefigure} color={config.secondaryColor} position={position} />
-        );
-      }
-      if (e.name === 'triangle') {
-        arrFigures.push(
-          <Triangle key={i} size={sizefigure} color={config.secondaryColor} position={position} />
-        );
-      }
-      if (e.name === 'diamondNarrow') {
-        arrFigures.push(
-          <DiamondNarrow
-            key={i}
-            size={sizefigure}
-            color={config.secondaryColor}
-            position={position}
-          />
-        );
-      }
-      if (e.name === 'cutDiamond') {
-        arrFigures.push(
-          <CutDiamond key={i} size={sizefigure} color={config.secondaryColor} position={position} />
-        );
-      }
-    });
-
-    return arrFigures;
-  };
-
-  return (
-    <View
-      style={{
-        ...styles.wrapper,
-        backgroundColor: config.primaryColor,
-        height: config.height,
-        borderBottomLeftRadius: config.borderRadius,
-        borderBottomRightRadius: config.borderRadius,
-        ...style
-      }}
-    >
-      <>{buildFigures()}</>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  wrapper: {
-    position: 'absolute',
-    height: '100%',
-    left: 0,
-    right: 0,
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  }
-});
-
-export { Shapes };

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

@@ -4,13 +4,13 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
 import { useTip } from '../../services/tip-manager';
-import { COLORS_NOTE } from '../../utils/Colors';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import Seperator from '../Seperator';
-import { Tip } from '../Tip';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { COLORS_NOTE } from '../../utils/color-scheme';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import Seperator from '../ui/seperator';
+import { Tip } from '../tip';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const Empty = React.memo(
   ({ loading = true, placeholderData, headerProps, type, screen }) => {

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

@@ -1,117 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import { useTracked } from '../../provider';
-import { useMessageStore } from '../../provider/stores';
-import { COLORS_NOTE } from '../../utils/Colors';
-import { hexToRGBA } from '../../utils/ColorUtils';
-import { normalize, SIZE } from '../../utils/SizeUtils';
-import { Announcement } from '../Announcements/announcement';
-import { Button } from '../Button';
-import { Placeholder } from '../ListPlaceholders';
-import Heading from '../Typography/Heading';
-import { Card } from './card';
-
-export const Header = React.memo(
-  ({
-    type,
-    messageCard = true,
-    title,
-    paragraph,
-    color,
-    onPress,
-    shouldShow = false,
-    icon,
-    screen,
-    noAnnouncement,
-    height
-  }) => {
-    const [state] = useTracked();
-    const { colors } = state;
-    const announcements = useMessageStore(state => state.announcements);
-
-    return announcements.length !== 0 && !noAnnouncement ? (
-      <Announcement color={color || colors.accent} />
-    ) : type === 'search' ? null : !shouldShow ? (
-      <View
-        style={{
-          marginBottom: 5,
-          padding: 0,
-          width: '100%',
-          justifyContent: 'center',
-          alignItems: 'center'
-        }}
-      >
-        {messageCard ? <Card color={COLORS_NOTE[color?.toLowerCase()] || colors.accent} /> : null}
-      </View>
-    ) : (
-      <View
-        style={{
-          width: '100%'
-        }}
-      >
-        <View
-          style={{
-            minHeight: height || 195,
-            padding: 12,
-            width: '100%',
-            zIndex: 10,
-            justifyContent: 'flex-end',
-            backgroundColor: COLORS_NOTE[color?.toLowerCase()]
-              ? hexToRGBA(COLORS_NOTE[color?.toLowerCase()], 0.15)
-              : color || colors.shade
-          }}
-        >
-          <View
-            style={{
-              right: 0,
-              paddingRight: 12,
-              bottom: 0,
-              position: 'absolute'
-            }}
-          >
-            <Placeholder
-              color={COLORS_NOTE[color?.toLowerCase()] || colors.accent}
-              w={normalize(150)}
-              h={normalize(150)}
-              type={screen === 'Favorites' ? 'favorites' : type}
-            />
-          </View>
-
-          <View
-            style={{
-              marginTop: 15
-            }}
-          >
-            <Heading style={{ marginBottom: paragraph ? 0 : 0 }} size={SIZE.xxxl * 1.2}>
-              <Heading size={SIZE.xxxl * 1.2} color={colors.accent}>
-                {title.slice(0, 1) === '#' ? '#' : null}
-              </Heading>
-
-              {title.slice(0, 1) === '#' ? title.slice(1) : title}
-            </Heading>
-
-            {paragraph ? (
-              <Button
-                height={20}
-                title={paragraph}
-                icon={icon}
-                style={{
-                  alignSelf: 'flex-start',
-                  paddingLeft: 0
-                }}
-                textStyle={{
-                  fontWeight: 'normal'
-                }}
-                iconSize={SIZE.sm}
-                fontSize={SIZE.sm}
-                onPress={onPress}
-              />
-            ) : null}
-          </View>
-        </View>
-      </View>
-    );
-  }
-);
-
-Header.displayName = 'Header';

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

@@ -9,15 +9,15 @@ import {
   presentSheet
 } from '../../services/EventManager';
 import SettingsService from '../../services/SettingsService';
-import { GROUP } from '../../utils';
-import { COLORS_NOTE } from '../../utils/Colors';
+import { GROUP } from '../../utils/constants';
+import { COLORS_NOTE } from '../../utils/color-scheme';
 import { db } from '../../utils/database';
-import { eOpenJumpToDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import Sort from '../Sort';
-import Heading from '../Typography/Heading';
+import { eOpenJumpToDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import Sort from '../sort';
+import Heading from '../ui/typography/heading';
 
 export const SectionHeader = ({ item, index, type, color, screen }) => {
   const [state] = useTracked();
@@ -117,7 +117,7 @@ export const SectionHeader = ({ item, index, type, color, screen }) => {
             />
 
             {type === 'notes' || type === 'notebooks' || type === 'home' ? (
-              <ActionIcon
+              <IconButton
                 customStyle={{
                   width: 25,
                   height: 25

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

@@ -6,14 +6,14 @@ import { useTagStore } from '../../provider/stores';
 import { eSubscribeEvent, eUnSubscribeEvent, ToastEvent } from '../../services/EventManager';
 import Navigation from '../../services/Navigation';
 import { db } from '../../utils/database';
-import { eCloseTagsDialog, eOpenTagsDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import Input from '../Input';
-import { PressableButton } from '../PressableButton';
-import SheetWrapper from '../Sheet';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseTagsDialog, eOpenTagsDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import Input from '../ui/input';
+import { PressableButton } from '../ui/pressable';
+import SheetWrapper from '../ui/sheet';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 const TagsDialog = () => {
   const [state] = useTracked();
   const colors = state.colors;

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

@@ -20,19 +20,19 @@ import {
   eCloseVaultDialog,
   eOnLoadNote,
   eOpenVaultDialog
-} from '../../utils/Events';
+} from '../../utils/events';
 import { deleteItems } from '../../utils/functions';
-import { tabBarRef } from '../../utils/Refs';
-import { sleep } from '../../utils/TimeUtils';
+import { tabBarRef } from '../../utils/global-refs';
+import { sleep } from '../../utils/time';
 import { getNote } from '../../views/Editor/Functions';
-import { Button } from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import DialogButtons from '../Dialog/dialog-buttons';
-import DialogHeader from '../Dialog/dialog-header';
-import Input from '../Input';
-import Seperator from '../Seperator';
-import { Toast } from '../Toast';
-import Paragraph from '../Typography/Paragraph';
+import { Button } from '../ui/button';
+import BaseDialog from '../dialog/base-dialog';
+import DialogButtons from '../dialog/dialog-buttons';
+import DialogHeader from '../dialog/dialog-header';
+import Input from '../ui/input';
+import Seperator from '../ui/seperator';
+import { Toast } from '../toast';
+import Paragraph from '../ui/typography/paragraph';
 
 let Keychain;
 const passInputRef = createRef();
@@ -703,7 +703,7 @@ export class VaultDialog extends Component {
                   onSubmit={() => {
                     changePassword ? changePassInputRef.current?.focus() : this.onPress;
                   }}
-                  autoCompleteType="password"
+                  autoComplete="password"
                   returnKeyLabel={changePassword ? 'Next' : this.state.title}
                   returnKeyType={changePassword ? 'next' : 'done'}
                   secureTextEntry
@@ -755,7 +755,7 @@ export class VaultDialog extends Component {
                   onChangeText={value => {
                     this.newPassword = value;
                   }}
-                  autoCompleteType="password"
+                  autoComplete="password"
                   onSubmit={this.onPress}
                   returnKeyLabel="Change"
                   returnKeyType="done"
@@ -774,7 +774,7 @@ export class VaultDialog extends Component {
                   onChangeText={value => {
                     this.password = value;
                   }}
-                  autoCompleteType="password"
+                  autoComplete="password"
                   returnKeyLabel="Next"
                   returnKeyType="next"
                   secureTextEntry
@@ -794,7 +794,7 @@ export class VaultDialog extends Component {
                   errorMessage="Passwords do not match."
                   onErrorCheck={e => null}
                   marginBottom={0}
-                  autoCompleteType="password"
+                  autoComplete="password"
                   returnKeyLabel="Create"
                   returnKeyType="done"
                   onChangeText={value => {

apps/mobile/src/components/auth/changepassword.js

@@ -4,12 +4,12 @@ import { useTracked } from '../../provider';
 import { useUserStore } from '../../provider/stores';
 import { eSendEvent, presentSheet, ToastEvent } from '../../services/EventManager';
 import { db } from '../../utils/database';
-import { eCloseProgressDialog } from '../../utils/Events';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Input from '../Input';
-import { Notice } from '../Notice';
-import Seperator from '../Seperator';
+import { eCloseProgressDialog } from '../../utils/events';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Input from '../ui/input';
+import { Notice } from '../ui/notice';
+import Seperator from '../ui/seperator';
 
 export const ChangePassword = () => {
   const [state] = useTracked();
@@ -83,7 +83,7 @@ export const ChangePassword = () => {
         returnKeyLabel="Next"
         returnKeyType="next"
         secureTextEntry
-        autoCompleteType="password"
+        autoComplete="password"
         autoCapitalize="none"
         autoCorrect={false}
         placeholder="Old Password"
@@ -99,7 +99,7 @@ export const ChangePassword = () => {
         returnKeyType="next"
         secureTextEntry
         validationType="password"
-        autoCompleteType="password"
+        autoComplete="password"
         autoCapitalize="none"
         autoCorrect={false}
         placeholder="New password"

apps/mobile/src/components/auth/forgotpassword.js

@@ -5,14 +5,14 @@ import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
 import { ToastEvent } from '../../services/EventManager';
 import { db } from '../../utils/database';
-import { MMKV } from '../../utils/mmkv';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import DialogHeader from '../Dialog/dialog-header';
-import Input from '../Input';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { MMKV } from '../../utils/database/mmkv';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import DialogHeader from '../dialog/dialog-header';
+import Input from '../ui/input';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const ForgotPassword = () => {
   const [state] = useTracked();
@@ -86,7 +86,7 @@ export const ForgotPassword = () => {
               paddingBottom: 50
             }}
           >
-            <ActionIcon
+            <IconButton
               customStyle={{
                 width: null,
                 height: null
@@ -129,7 +129,7 @@ export const ForgotPassword = () => {
               onErrorCheck={e => setError(e)}
               returnKeyLabel="Next"
               returnKeyType="next"
-              autoCompleteType="email"
+              autoComplete="email"
               validationType="email"
               autoCorrect={false}
               autoCapitalize="none"

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

@@ -1,10 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useTracked } from '../../provider/index';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { eCloseLoginDialog, eOpenLoginDialog } from '../../utils/Events';
-import { sleep } from '../../utils/TimeUtils';
-import BaseDialog from '../Dialog/base-dialog';
-import { Toast } from '../Toast';
+import { eCloseLoginDialog, eOpenLoginDialog } from '../../utils/events';
+import { sleep } from '../../utils/time';
+import BaseDialog from '../dialog/base-dialog';
+import { Toast } from '../toast';
 import { Login } from './login';
 import { Signup } from './signup';
 

apps/mobile/src/components/auth/login.js

@@ -9,18 +9,18 @@ import { eSendEvent, presentSheet, ToastEvent } from '../../services/EventManage
 import { clearMessage } from '../../services/Message';
 import PremiumService from '../../services/PremiumService';
 import { db } from '../../utils/database';
-import { eCloseLoginDialog } from '../../utils/Events';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import Input from '../Input';
-import { SvgToPngView } from '../ListPlaceholders';
-import { BouncingView } from '../Transitions/bouncing-view';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eCloseLoginDialog } from '../../utils/events';
+import { MMKV } from '../../utils/database/mmkv';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import BaseDialog from '../dialog/base-dialog';
+import Input from '../ui/input';
+import { SvgView } from '../ui/svg';
+import { BouncingView } from '../ui/transitions/bouncing-view';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { SVG } from './background';
 import { ForgotPassword } from './forgot-password';
 
@@ -101,7 +101,7 @@ export const Login = ({ changeMode }) => {
 
   return (
     <>
-      <ActionIcon
+      <IconButton
         name="arrow-left"
         onPress={() => {
           eSendEvent(eCloseLoginDialog);
@@ -134,7 +134,7 @@ export const Login = ({ changeMode }) => {
           }}
         >
           <BouncingView initialScale={1.2} duration={5000}>
-            <SvgToPngView src={SVG(colors.night ? colors.icon : 'black')} height={700} />
+            <SvgView src={SVG(colors.night ? colors.icon : 'black')} height={700} />
           </BouncingView>
         </View>
         <BouncingView initialScale={0.95} duration={3000}>
@@ -187,7 +187,7 @@ export const Login = ({ changeMode }) => {
               onErrorCheck={e => setError(e)}
               returnKeyLabel="Next"
               returnKeyType="next"
-              autoCompleteType="email"
+              autoComplete="email"
               validationType="email"
               autoCorrect={false}
               autoCapitalize="none"
@@ -205,7 +205,7 @@ export const Login = ({ changeMode }) => {
               returnKeyLabel="Done"
               returnKeyType="done"
               secureTextEntry
-              autoCompleteType="password"
+              autoComplete="password"
               autoCapitalize="none"
               validationType="password"
               autoCorrect={false}

apps/mobile/src/components/auth/sessionexpired.js

@@ -14,17 +14,17 @@ import { clearMessage } from '../../services/Message';
 import PremiumService from '../../services/PremiumService';
 import Sync from '../../services/Sync';
 import { db } from '../../utils/database';
-import { MMKV } from '../../utils/mmkv';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { Dialog } from '../Dialog';
-import { presentDialog } from '../Dialog/functions';
-import Input from '../Input';
-import { Toast } from '../Toast';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { MMKV } from '../../utils/database/mmkv';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import { Dialog } from '../dialog';
+import { presentDialog } from '../dialog/functions';
+import Input from '../ui/input';
+import { Toast } from '../toast';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 function getEmail(email) {
   if (!email) return null;
@@ -157,7 +157,7 @@ export const SessionExpired = () => {
               paddingVertical: 20
             }}
           >
-            <ActionIcon
+            <IconButton
               customStyle={{
                 width: 60,
                 height: 60
@@ -187,7 +187,7 @@ export const SessionExpired = () => {
             returnKeyLabel="Next"
             returnKeyType="next"
             secureTextEntry
-            autoCompleteType="password"
+            autoComplete="password"
             autoCapitalize="none"
             autoCorrect={false}
             placeholder="Password"

apps/mobile/src/components/auth/signup.js

@@ -8,19 +8,19 @@ import { eSendEvent, ToastEvent } from '../../services/EventManager';
 import { clearMessage, setEmailVerifyMessage } from '../../services/Message';
 import PremiumService from '../../services/PremiumService';
 import { db } from '../../utils/database';
-import { eCloseLoginDialog } from '../../utils/Events';
+import { eCloseLoginDialog } from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import umami from '../../utils/umami';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import Input from '../Input';
-import { SvgToPngView } from '../ListPlaceholders';
-import { BouncingView } from '../Transitions/bouncing-view';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import umami from '../../utils/analytics';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import BaseDialog from '../dialog/base-dialog';
+import Input from '../ui/input';
+import { SvgView } from '../ui/svg';
+import { BouncingView } from '../ui/transitions/bouncing-view';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { SVG } from './background';
 
 export const Signup = ({ changeMode, welcome, trial }) => {
@@ -87,7 +87,7 @@ export const Signup = ({ changeMode, welcome, trial }) => {
   return (
     <>
       {!welcome && (
-        <ActionIcon
+        <IconButton
           name="arrow-left"
           onPress={() => {
             eSendEvent(eCloseLoginDialog);
@@ -119,7 +119,7 @@ export const Signup = ({ changeMode, welcome, trial }) => {
           }}
         >
           <BouncingView initialScale={1.2} duration={5000}>
-            <SvgToPngView src={SVG(colors.night ? colors.icon : 'black')} height={700} />
+            <SvgView src={SVG(colors.night ? colors.icon : 'black')} height={700} />
           </BouncingView>
         </View>
 
@@ -172,7 +172,7 @@ export const Signup = ({ changeMode, welcome, trial }) => {
               onErrorCheck={e => setError(e)}
               returnKeyLabel="Next"
               returnKeyType="next"
-              autoCompleteType="email"
+              autoComplete="email"
               validationType="email"
               autoCorrect={false}
               autoCapitalize="none"
@@ -190,7 +190,7 @@ export const Signup = ({ changeMode, welcome, trial }) => {
               returnKeyLabel="Next"
               returnKeyType="next"
               secureTextEntry
-              autoCompleteType="password"
+              autoComplete="password"
               autoCapitalize="none"
               validationType="password"
               autoCorrect={false}
@@ -206,7 +206,7 @@ export const Signup = ({ changeMode, welcome, trial }) => {
               returnKeyLabel="Signup"
               returnKeyType="done"
               secureTextEntry
-              autoCompleteType="password"
+              autoComplete="password"
               autoCapitalize="none"
               autoCorrect={false}
               validationType="confirmPassword"

apps/mobile/src/components/container/containerheader.js

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { useTracked } from '../../provider';
 import { useSelectionStore } from '../../provider/stores';
 
-export const ContainerTopSection = ({ children }) => {
+export const ContainerHeader = ({ children }) => {
   const [state] = useTracked();
   const { colors } = state;
   const selectionMode = useSelectionStore(state => state.selectionMode);

apps/mobile/src/components/container/floatingbutton.js

@@ -6,11 +6,11 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../e2e/test.ids';
 import { useSelectionStore, useSettingStore } from '../../provider/stores';
 import { editing, getElevation, showTooltip, TOOLTIP_POSITIONS } from '../../utils';
-import { normalize, SIZE } from '../../utils/SizeUtils';
-import { PressableButton } from '../PressableButton';
+import { normalize, SIZE } from '../../utils/size';
+import { PressableButton } from '../ui/pressable';
 
 const translateY = new Animated.Value(0);
-export const ContainerBottomButton = ({ title, onPress, color = 'accent', shouldShow = false }) => {
+export const FloatingButton = ({ title, onPress, color = 'accent', shouldShow = false }) => {
   const insets = useSafeAreaInsets();
   const deviceMode = useSettingStore(state => state.deviceMode);
   const selectionMode = useSelectionStore(state => state.selectionMode);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { KeyboardAvoidingView, Platform, SafeAreaView } from 'react-native';
 import { useTracked } from '../../provider';
-import useIsFloatingKeyboard from '../../utils/use-is-floating-keyboard';
+import useIsFloatingKeyboard from '../../utils/hooks/use-is-floating-keyboard';
 export const Container = ({ children }) => {
   const [state] = useTracked();
   const { colors } = state;

apps/mobile/src/components/dialog/BaseDialog.js

@@ -9,8 +9,8 @@ import {
   View
 } from 'react-native';
 import { useSettingStore } from '../../provider/stores';
-import useIsFloatingKeyboard from '../../utils/use-is-floating-keyboard';
-import { BouncingView } from '../Transitions/bouncing-view';
+import useIsFloatingKeyboard from '../../utils/hooks/use-is-floating-keyboard';
+import { BouncingView } from '../ui/transitions/bouncing-view';
 
 const BaseDialog = ({
   visible,

apps/mobile/src/components/dialog/DialogButtons.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import Paragraph from '../ui/typography/paragraph';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { notesnook } from '../../../e2e/test.ids';
 

apps/mobile/src/components/dialog/DialogHeader.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { Text } from 'react-native';
 import { View } from 'react-native';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import { Button } from '../Button';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 const DialogHeader = ({
   icon,

apps/mobile/src/components/dialog/functions.ts

@@ -1,5 +1,5 @@
 import { eSendEvent } from '../../services/EventManager';
-import { eCloseSimpleDialog, eOpenSimpleDialog } from '../../utils/Events';
+import { eCloseSimpleDialog, eOpenSimpleDialog } from '../../utils/events';
 
 type DialogInfo = {
   title?: string;

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

@@ -4,11 +4,11 @@ import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { getElevation } from '../../utils';
-import { eCloseSimpleDialog, eOpenSimpleDialog } from '../../utils/Events';
-import { sleep } from '../../utils/TimeUtils';
-import Input from '../Input';
-import Seperator from '../Seperator';
-import { Toast } from '../Toast';
+import { eCloseSimpleDialog, eOpenSimpleDialog } from '../../utils/events';
+import { sleep } from '../../utils/time';
+import Input from '../ui/input';
+import Seperator from '../ui/seperator';
+import { Toast } from '../toast';
 import BaseDialog from './base-dialog';
 import DialogButtons from './dialog-buttons';
 import DialogHeader from './dialog-header';
@@ -84,8 +84,7 @@ export const Dialog = ({ context = 'global' }) => {
     paddingTop: 12
   };
 
-  return (
-    visible && (
+  return visible ? (
     <BaseDialog
       statusBarTranslucent={false}
       bounce={!dialogInfo.input}
@@ -144,6 +143,5 @@ export const Dialog = ({ context = 'global' }) => {
       </View>
       <Toast context="local" />
     </BaseDialog>
-    )
-  );
+  ) : null;
 };

apps/mobile/src/components/dialogprovider/Recievers.js

@@ -9,7 +9,7 @@ import {
   eOpenAddNotebookDialog,
   eOpenAddTopicDialog,
   eOpenMoveNoteDialog
-} from '../../utils/Events';
+} from '../../utils/events';
 
 export const ActionSheetEvent = (item, buttons) => {
   eSendEvent(eOpenActionSheet, {

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { useTracked } from '../../provider';
+import { EditorSettings } from '../../views/Editor/EditorSettings';
+import { AddNotebookDialog } from '../AddNotebookDialog';
+import { AddTopicDialog } from '../AddTopicDialog';
+import { AnnouncementDialog } from '../Announcements';
+import { AttachmentDialog } from '../AttachmentDialog';
+import Auth from '../auth';
+import { SessionExpired } from '../auth/session-expired';
+import { Dialog } from '../dialog';
+import ExportDialog from '../ExportDialog';
+import ImagePreview from '../image-preview';
+import MergeEditor from '../MergeEditor';
+import MoveNoteDialog from '../MoveNoteDialog';
+import PremiumDialog from '../premium';
+import { Expiring } from '../premium/expiring';
+import PublishNoteDialog from '../PublishNoteDialog';
+import RateDialog from '../RateDialog';
+import RecoveryKeyDialog from '../RecoveryKeyDialog';
+import RestoreDialog from '../RestoreDialog';
+import ResultDialog from '../ResultDialog';
+import SheetProvider from '../sheet-provider';
+import TagsDialog from '../TagsDialog';
+import { VaultDialog } from '../VaultDialog';
+
+function DialogProvider() {
+  const [state] = useTracked();
+  const { colors } = state;
+
+  return (
+    <>
+      <Dialog context="global" />
+      <AddTopicDialog colors={colors} />
+      <AddNotebookDialog colors={colors} />
+      <PremiumDialog colors={colors} />
+      <Auth colors={colors} />
+      <MergeEditor />
+      <ExportDialog />
+      <RecoveryKeyDialog colors={colors} />
+      <SheetProvider />
+      <RestoreDialog />
+      <ResultDialog />
+      <VaultDialog colors={colors} />
+      <MoveNoteDialog colors={colors} />
+      <RateDialog />
+      <ImagePreview />
+      <EditorSettings />
+      <PublishNoteDialog />
+      <TagsDialog />
+      <AttachmentDialog />
+      <Expiring />
+      <AnnouncementDialog />
+      <SessionExpired />
+    </>
+  );
+}
+
+export default React.memo(DialogProvider, () => true);

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

@@ -4,11 +4,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTracked } from '../../provider';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import SearchService from '../../services/SearchService';
-import { eScrollEvent } from '../../utils/Events';
-import { ActionIcon } from '../ActionIcon';
+import { eScrollEvent } from '../../utils/events';
+import { IconButton } from '../ui/icon-button';
 import { SearchInput } from '../SearchInput';
-import { HeaderLeftMenu } from './HeaderLeftMenu';
-import { HeaderRightMenu } from './HeaderRightMenu';
+import { LeftMenus } from './left-menus';
+import { RightMenus } from './right-menus';
 import { Title } from './title';
 
 export const Header = React.memo(
@@ -49,7 +49,7 @@ export const Header = React.memo(
         ]}
       >
         <View style={styles.leftBtnContainer}>
-          <HeaderLeftMenu headerMenuState={!isBack} currentScreen={screen} />
+          <LeftMenus headerMenuState={!isBack} currentScreen={screen} />
 
           <Title
             notebook={notebook}
@@ -60,7 +60,7 @@ export const Header = React.memo(
           />
         </View>
 
-        <HeaderRightMenu rightButtons={rightButtons} action={action} currentScreen={screen} />
+        <RightMenus rightButtons={rightButtons} action={action} currentScreen={screen} />
       </View>
     );
   },

apps/mobile/src/components/header/leftmenus.js

@@ -4,10 +4,9 @@ import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
 import { DDS } from '../../services/DeviceDetection';
 import Navigation from '../../services/Navigation';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
+import { IconButton } from '../ui/icon-button';
 
-export const HeaderLeftMenu = ({ currentScreen, headerMenuState }) => {
+export const LeftMenus = ({ currentScreen, headerMenuState }) => {
   const [state] = useTracked();
   const { colors } = state;
   const deviceMode = useSettingStore(state => state.deviceMode);
@@ -23,7 +22,7 @@ export const HeaderLeftMenu = ({ currentScreen, headerMenuState }) => {
   return (
     <>
       {deviceMode !== 'tablet' || currentScreen === 'Search' || !headerMenuState ? (
-        <ActionIcon
+        <IconButton
           testID={notesnook.ids.default.header.buttons.left}
           customStyle={{
             justifyContent: 'center',

apps/mobile/src/components/header/rightmenus.js

@@ -1,17 +1,15 @@
 import React, { useRef } from 'react';
 import { StyleSheet, View } from 'react-native';
-import Menu, { MenuItem } from 'react-native-reanimated-material-menu';
-import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import Menu from 'react-native-reanimated-material-menu';
 import { notesnook } from '../../../e2e/test.ids';
 import { useTracked } from '../../provider';
 import { useSettingStore } from '../../provider/stores';
 import Navigation from '../../services/Navigation';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import { IconButton } from '../ui/icon-button';
 
-export const HeaderRightMenu = ({ currentScreen, action, rightButtons }) => {
+export const RightMenus = ({ currentScreen, action, rightButtons }) => {
   const [state] = useTracked();
   const { colors } = state;
   const deviceMode = useSettingStore(state => state.deviceMode);
@@ -19,7 +17,7 @@ export const HeaderRightMenu = ({ currentScreen, action, rightButtons }) => {
   return (
     <View style={styles.rightBtnContainer}>
       {currentScreen !== 'Settings' ? (
-        <ActionIcon
+        <IconButton
           onPress={async () => {
             Navigation.navigate('Search', {
               menu: false
@@ -65,7 +63,7 @@ export const HeaderRightMenu = ({ currentScreen, action, rightButtons }) => {
             backgroundColor: colors.bg
           }}
           button={
-            <ActionIcon
+            <IconButton
               onPress={() => {
                 menuRef.current?.show();
               }}

apps/mobile/src/components/header/title.js

@@ -3,10 +3,10 @@ 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';
+import { eOnNewTopicAdded, eScrollEvent } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const Title = ({ heading, headerColor, screen, notebook }) => {
   const [state] = useTracked();

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

@@ -2,9 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import ImageViewer from 'react-native-image-zoom-viewer';
 import RNFetchBlob from 'rn-fetch-blob';
-import Storage from '../../utils/storage';
-import { ActionIcon } from '../ActionIcon';
-import BaseDialog from '../Dialog/base-dialog';
+import Storage from '../../utils/database/storage';
+import { IconButton } from '../ui/icon-button';
+import BaseDialog from '../dialog/base-dialog';
 const { eSubscribeEvent, eUnSubscribeEvent } = require('../../services/EventManager');
 
 const ImagePreview = () => {
@@ -62,7 +62,7 @@ const ImagePreview = () => {
                   paddingTop: 30
                 }}
               >
-                <ActionIcon
+                <IconButton
                   name="close"
                   color="white"
                   onPress={() => {

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

@@ -23,27 +23,27 @@ import { setRateAppMessage } from '../../services/Message';
 import PremiumService from '../../services/PremiumService';
 import { editing } from '../../utils';
 import { db } from '../../utils/database';
-import { eOpenAnnouncementDialog } from '../../utils/Events';
-import { MMKV } from '../../utils/mmkv';
-import { tabBarRef } from '../../utils/Refs';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import { eOpenAnnouncementDialog } from '../../utils/events';
+import { MMKV } from '../../utils/database/mmkv';
+import { tabBarRef } from '../../utils/global-refs';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 import SettingsBackupAndRestore from '../../views/Settings/backup-restore';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import Input from '../Input';
-import { SvgToPngView } from '../ListPlaceholders';
-import { SVG } from '../Auth/background';
-import Seperator from '../Seperator';
-import SplashScreen from '../SplashScreen';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
-import { Update } from '../Update';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import Input from '../ui/input';
+import { SvgView } from '../ui/svg';
+import { SVG } from '../auth/background';
+import Seperator from '../ui/seperator';
+import Intro from '../intro';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
+import { Update } from '../update';
 
 let passwordValue = null;
 let didVerifyUser = false;
 
-const AppLoader = ({ onLoad }) => {
+const Launcher = ({ onLoad }) => {
   const [state] = useTracked();
   const colors = state.colors;
   const setNotes = useNoteStore(state => state.setNotes);
@@ -250,7 +250,7 @@ const AppLoader = ({ onLoad }) => {
           overflow: 'hidden'
         }}
       >
-        <SvgToPngView src={SVG(colors.night ? 'white' : 'black')} height={700} />
+        <SvgView src={SVG(colors.night ? 'white' : 'black')} height={700} />
       </View>
 
       <View
@@ -263,7 +263,7 @@ const AppLoader = ({ onLoad }) => {
           marginTop: 15
         }}
       >
-        <ActionIcon
+        <IconButton
           name="fingerprint"
           size={100}
           customStyle={{
@@ -355,8 +355,8 @@ const AppLoader = ({ onLoad }) => {
       </View>
     </View>
   ) : requireIntro.value && !_loading ? (
-    <SplashScreen />
+    <Intro />
   ) : null;
 };
 
-export default AppLoader;
+export default Launcher;

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

@@ -3,10 +3,10 @@ import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 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';
+import { hexToRGBA } from '../../utils/color-scheme/utils';
+import { SIZE } from '../../utils/size';
+import { PressableButton } from '../ui/pressable';
+import Paragraph from '../ui/typography/paragraph';
 
 export const Card = ({ color }) => {
   const [state] = useTracked();

apps/mobile/src/components/list/empty.js

@@ -0,0 +1,130 @@
+import React from 'react';
+import { ActivityIndicator, useWindowDimensions, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTracked } from '../../provider';
+import { useSettingStore } from '../../provider/stores';
+import { useTip } from '../../services/tip-manager';
+import { COLORS_NOTE } from '../../utils/color-scheme';
+import { SIZE } from '../../utils/size';
+import { Button } from '../ui/button';
+import Seperator from '../ui/seperator';
+import { Tip } from '../tip';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
+
+export const Empty = React.memo(
+  ({ loading = true, placeholderData, headerProps, type, screen }) => {
+    const [state] = useTracked();
+    const { colors } = state;
+    const insets = useSafeAreaInsets();
+    const { height } = useWindowDimensions();
+    const introCompleted = useSettingStore(state => state.isIntroCompleted);
+    const tip = useTip(
+      screen === 'Notes' && introCompleted ? 'first-note' : placeholderData.type || type,
+      screen === 'Notes' ? 'notes' : null
+    );
+    const color =
+      colors[COLORS_NOTE[headerProps.color?.toLowerCase()] ? headerProps.color : 'accent'];
+    return (
+      <View
+        style={[
+          {
+            height: height - (140 + insets.top),
+            width: '80%',
+            justifyContent: 'center',
+            alignSelf: 'center'
+          }
+        ]}
+      >
+        {!loading ? (
+          <>
+            <Tip
+              color={COLORS_NOTE[headerProps.color?.toLowerCase()] ? headerProps.color : 'accent'}
+              tip={tip}
+              style={{
+                backgroundColor: 'transparent',
+                paddingHorizontal: 0
+              }}
+            />
+            {placeholderData.button && (
+              <Button
+                type="grayAccent"
+                title={placeholderData.button}
+                iconPosition="right"
+                icon="arrow-right"
+                onPress={placeholderData.action}
+                accentColor={
+                  COLORS_NOTE[headerProps.color?.toLowerCase()] ? headerProps.color : 'accent'
+                }
+                accentText="light"
+                style={{
+                  alignSelf: 'flex-start',
+                  borderRadius: 5,
+                  height: 40
+                }}
+              />
+            )}
+          </>
+        ) : (
+          <>
+            <View
+              style={{
+                alignSelf: 'center',
+                alignItems: 'flex-start',
+                width: '100%'
+              }}
+            >
+              <Heading>{placeholderData.heading}</Heading>
+              <Paragraph size={SIZE.sm} textBreakStrategy="balanced">
+                {placeholderData.loading}
+              </Paragraph>
+              <Seperator />
+              <ActivityIndicator
+                size={SIZE.lg}
+                color={COLORS_NOTE[headerProps.color?.toLowerCase()] || colors.accent}
+              />
+            </View>
+          </>
+        )}
+      </View>
+    );
+  },
+  (prev, next) => {
+    if (prev.loading === next.loading) return true;
+    return false;
+  }
+);
+
+/**
+ * Make a tips manager.
+ * The tip manager stores many tips. Each tip has following values
+ * 1. Text
+ * 2. contexts: An array of context strings. // Places where the tip can be shown
+ * 3. Button if any.
+ * 4. Image/Gif asset.
+ *
+ * Tip manager adds the following methods -> get(context). Returns a random tip for the following context.
+ *
+ * Tips can be shown in a sheet or in a list. For sheets, GeneralSheet can be used to
+ * render tips.
+ *
+ * Where can the tips be shown and how?
+ * 1. When transitioning, show tips in a sheet. Make sure its useful
+ * 2. Replace placeholders with tips.
+ * 3. Show tips in editor placeholder.
+ * 4. Show tips between list items?
+ *
+ * Tooltips.
+ * Small tooltips can be shown in initial render first time.
+ * Especially for items that are not shown on blank page. Should be
+ * in places where it makes sense and does not interrupt the user.
+ *
+ * Can also be shown when first time entering a screen that
+ * has something that the user might not know of. Like sorting and side menu.
+ *
+ * Todo:
+ * 1. Make a tip manager.
+ * 2. Make a list of tips.
+ * 3. Add images for those tips.
+ * 4. Show tips
+ */

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

@@ -6,14 +6,14 @@ import { useUserStore } from '../../provider/stores';
 import { eSendEvent } from '../../services/EventManager';
 import Sync from '../../services/Sync';
 import { db } from '../../utils/database';
-import { eScrollEvent } from '../../utils/Events';
+import { eScrollEvent } from '../../utils/events';
 import JumpToDialog from '../JumpToDialog';
-import { NotebookWrapper } from '../NotebookItem/wrapper';
-import { NoteWrapper } from '../NoteItem/wrapper';
-import TagItem from '../TagItem';
+import { NotebookWrapper } from '../list-items/notebook/wrapper';
+import { NoteWrapper } from '../list-items/note/wrapper';
+import TagItem from '../list-items/tag';
 import { Empty } from './empty';
-import { Footer } from './footer';
-import { Header } from './header';
+import { Footer } from '../list-items/footer';
+import { Header } from '../list-items/headers/header';
 import { SectionHeader } from './section-header';
 
 let renderItems = {
@@ -48,7 +48,7 @@ const RenderItem = ({ item, index, type, ...restArgs }) => {
   return <Item item={item} tags={tags} dateBy={dateBy} index={index} type={type} {...restArgs} />;
 };
 
-const SimpleList = ({
+const List = ({
   listData,
   type,
   refreshCallback,
@@ -186,4 +186,4 @@ const SimpleList = ({
   );
 };
 
-export default SimpleList;
+export default List;

apps/mobile/src/components/listitems/headers/header.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useTracked } from '../../../provider';
+import { useMessageStore } from '../../../provider/stores';
+import { COLORS_NOTE } from '../../../utils/color-scheme';
+import { Announcement } from '../../Announcements/announcement';
+import { Card } from '../../list/card';
+
+export const Header = React.memo(
+  ({ type, messageCard = true, color, shouldShow = false, noAnnouncement }) => {
+    const [state] = useTracked();
+    const { colors } = state;
+    const announcements = useMessageStore(state => state.announcements);
+
+    return (
+      <>
+        {announcements.length !== 0 && !noAnnouncement ? (
+          <Announcement color={color || colors.accent} />
+        ) : type === 'search' ? null : !shouldShow ? (
+          <View
+            style={{
+              marginBottom: 5,
+              padding: 0,
+              width: '100%',
+              justifyContent: 'center',
+              alignItems: 'center'
+            }}
+          >
+            {messageCard ? (
+              <Card color={COLORS_NOTE[color?.toLowerCase()] || colors.accent} />
+            ) : null}
+          </View>
+        ) : null}
+      </>
+    );
+  }
+);
+
+Header.displayName = 'Header';

apps/mobile/src/components/listitems/headers/notebookheader.js

@@ -5,10 +5,10 @@ import { useMenuStore } from '../../provider/stores';
 import { ToastEvent } from '../../services/EventManager';
 import { getTotalNotes } from '../../utils';
 import { db } from '../../utils/database';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const NotebookHeader = ({ notebook, onEditNotebook }) => {
   const [state] = useTracked();
@@ -64,7 +64,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
             flexDirection: 'row'
           }}
         >
-          <ActionIcon
+          <IconButton
             name={isPinnedToMenu ? 'link-variant-off' : 'link-variant'}
             onPress={onPinNotebook}
             tooltipText={'Create shortcut in side menu'}
@@ -78,7 +78,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
             color={isPinnedToMenu ? colors.accent : colors.icon}
             size={SIZE.lg}
           />
-          <ActionIcon
+          <IconButton
             size={SIZE.lg}
             onPress={onEditNotebook}
             tooltipText="Edit this notebook"

apps/mobile/src/components/listitems/headers/sectionheader.js

@@ -0,0 +1,145 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { TouchableOpacity, useWindowDimensions, View } from 'react-native';
+import { useTracked } from '../../provider';
+import { useSettingStore } from '../../provider/stores';
+import {
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+  presentSheet
+} from '../../services/EventManager';
+import SettingsService from '../../services/SettingsService';
+import { GROUP } from '../../utils/constants';
+import { COLORS_NOTE } from '../../utils/color-scheme';
+import { db } from '../../utils/database';
+import { eOpenJumpToDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { IconButton } from '../ui/icon-button';
+import { Button } from '../ui/button';
+import Sort from '../Sort';
+import Heading from '../ui/typography/heading';
+
+export const SectionHeader = ({ item, index, type, color, screen }) => {
+  const [state] = useTracked();
+  const { colors } = state;
+  const { fontScale } = useWindowDimensions();
+  const [groupOptions, setGroupOptions] = useState(db.settings?.getGroupOptions(type));
+  let groupBy = Object.keys(GROUP).find(key => GROUP[key] === groupOptions.groupBy);
+  const jumpToRef = useRef();
+  const sortRef = useRef();
+  const compactModeRef = useRef();
+
+  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);
+
+  const onUpdate = () => {
+    setGroupOptions({ ...db.settings?.getGroupOptions(type) });
+  };
+
+  useEffect(() => {
+    eSubscribeEvent('groupOptionsUpdate', onUpdate);
+    return () => {
+      eUnSubscribeEvent('groupOptionsUpdate', onUpdate);
+    };
+  }, []);
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '95%',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        height: 35 * fontScale,
+        backgroundColor: colors.nav,
+        alignSelf: 'center',
+        borderRadius: 5,
+        marginVertical: 5
+      }}
+    >
+      <TouchableOpacity
+        onPress={() => {
+          eSendEvent(eOpenJumpToDialog, type);
+        }}
+        ref={jumpToRef}
+        activeOpacity={0.9}
+        hitSlop={{ top: 10, left: 10, right: 30, bottom: 15 }}
+        style={{
+          height: '100%',
+          justifyContent: 'center'
+        }}
+      >
+        <Heading
+          color={COLORS_NOTE[color?.toLowerCase()] || colors.accent}
+          size={SIZE.sm}
+          style={{
+            minWidth: 60,
+            alignSelf: 'center',
+            textAlignVertical: 'center'
+          }}
+        >
+          {!item.title || item.title === '' ? 'Pinned' : item.title}
+        </Heading>
+      </TouchableOpacity>
+
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center'
+        }}
+      >
+        {index === 0 ? (
+          <>
+            <Button
+              onPress={() => {
+                presentSheet({
+                  component: <Sort screen={screen} type={type} />
+                });
+              }}
+              tooltipText="Change sorting of items in list"
+              fwdRef={sortRef}
+              title={groupBy}
+              icon={groupOptions.sortDirection === 'asc' ? 'sort-ascending' : 'sort-descending'}
+              height={25}
+              style={{
+                borderRadius: 100,
+                paddingHorizontal: 0,
+                backgroundColor: 'transparent',
+                marginRight: type === 'notes' || type === 'home' || type === 'notebooks' ? 10 : 0
+              }}
+              type="gray"
+              iconPosition="right"
+            />
+
+            {type === 'notes' || type === 'notebooks' || type === 'home' ? (
+              <IconButton
+                customStyle={{
+                  width: 25,
+                  height: 25
+                }}
+                tooltipText={
+                  listMode == 'compact' ? 'Switch to normal mode' : 'Switch to compact mode'
+                }
+                fwdRef={compactModeRef}
+                color={colors.icon}
+                name={listMode == 'compact' ? 'view-list' : 'view-list-outline'}
+                onPress={() => {
+                  SettingsService.set(
+                    type !== 'notebooks' ? 'notesListMode' : 'notebooksListMode',
+                    listMode === 'normal' ? 'compact' : 'normal'
+                  );
+                }}
+                size={SIZE.lg - 2}
+              />
+            ) : null}
+          </>
+        ) : null}
+      </View>
+    </View>
+  );
+};

apps/mobile/src/components/listitems/note/index.js

@@ -0,0 +1,303 @@
+import { decode, EntityLevel } from 'entities';
+import React from 'react';
+import { View } from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { notesnook } from '../../../../e2e/test.ids';
+import { useTracked } from '../../../provider';
+import { useSettingStore } from '../../../provider/stores';
+import { eSendEvent } from '../../../services/EventManager';
+import Navigation from '../../../services/Navigation';
+import { COLORS_NOTE } from '../../../utils/color-scheme';
+import { db } from '../../../utils/database';
+import { refreshNotesPage } from '../../../utils/events';
+import { SIZE } from '../../../utils/size';
+import { IconButton } from '../../ui/icon-button';
+import { Button } from '../../ui/button';
+import { TimeSince } from '../../side-menu/TimeSince';
+import { Properties } from '../../properties';
+import Heading from '../../ui/typography/heading';
+import Paragraph from '../../ui/typography/paragraph';
+
+const navigateToTopic = topic => {
+  let routeName = 'NotesPage';
+  let params = { ...topic, menu: false, get: 'topics' };
+  let headerState = {
+    heading: topic.title,
+    id: topic.id,
+    type: topic.type
+  };
+  eSendEvent(refreshNotesPage, params);
+  Navigation.navigate(routeName, params, headerState);
+};
+
+function navigateToTag(item) {
+  let _tag = db.tags.tag(item.id);
+  if (!_tag) return;
+  let params = {
+    ..._tag,
+    type: 'tag',
+    get: 'tagged'
+  };
+
+  eSendEvent(refreshNotesPage, params);
+  Navigation.navigate('NotesPage', params, {
+    heading: '#' + _tag.title,
+    id: _tag.id,
+    type: _tag.type
+  });
+}
+
+const showActionSheet = item => {
+  Properties.present(item);
+};
+
+const NoteItem = ({ item, isTrash, tags, dateBy = 'dateCreated', noOpen = false }) => {
+  const [state] = useTracked();
+  const { colors } = state;
+  const settings = useSettingStore(state => state.settings);
+  const compactMode = settings.notesListMode === 'compact';
+  const attachmentCount = db.attachments?.ofNote(item.id, 'all')?.length || 0;
+
+  function getNotebook() {
+    if (isTrash || !item.notebooks || item.notebooks.length < 1) return [];
+    let item_notebook = item.notebooks?.slice(0, 1)[0];
+    let notebook = db.notebooks.notebook(item_notebook.id);
+
+    if (!notebook) return [];
+    let topic = notebook.topics.topic(item_notebook.topics[0])?._topic;
+
+    if (!topic) return [];
+
+    notebook = notebook.data;
+
+    return [
+      {
+        title: `${notebook?.title} › ${topic?.title}`,
+        notebook: notebook,
+        topic: topic
+      }
+    ];
+  }
+
+  return (
+    <>
+      <View
+        style={{
+          flexGrow: 1,
+          flexShrink: 1
+        }}
+      >
+        {!compactMode ? (
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              zIndex: 10,
+              elevation: 10,
+              marginBottom: 2.5
+            }}
+          >
+            {getNotebook().map(_item => (
+              <Button
+                title={_item.title}
+                key={_item}
+                height={20}
+                icon="book-outline"
+                type="grayBg"
+                fontSize={SIZE.xs}
+                iconSize={SIZE.sm}
+                textStyle={{
+                  marginRight: 0
+                }}
+                style={{
+                  borderRadius: 5,
+                  marginRight: 5,
+                  borderWidth: 0.5,
+                  borderColor: colors.icon,
+                  paddingHorizontal: 6
+                }}
+                onPress={() => navigateToTopic(_item.topic)}
+              />
+            ))}
+          </View>
+        ) : null}
+
+        <Heading
+          numberOfLines={1}
+          color={COLORS_NOTE[item.color?.toLowerCase()] || colors.heading}
+          style={{
+            flexWrap: 'wrap'
+          }}
+          size={SIZE.md}
+        >
+          {item.title}
+        </Heading>
+
+        {item.headline && !compactMode ? (
+          <Paragraph
+            style={{
+              flexWrap: 'wrap'
+            }}
+            numberOfLines={2}
+          >
+            {decode(item.headline, {
+              level: EntityLevel.HTML
+            })}
+          </Paragraph>
+        ) : null}
+
+        <View
+          style={{
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+            width: '100%',
+            marginTop: 5,
+            height: SIZE.md + 2
+          }}
+        >
+          {!isTrash ? (
+            <>
+              {item.conflicted ? (
+                <Icon
+                  name="alert-circle"
+                  style={{
+                    marginRight: 6
+                  }}
+                  size={SIZE.sm}
+                  color={colors.red}
+                />
+              ) : null}
+              <TimeSince
+                style={{
+                  fontSize: SIZE.xs,
+                  color: colors.icon,
+                  marginRight: 6
+                }}
+                time={item[dateBy]}
+                updateFrequency={Date.now() - item[dateBy] < 60000 ? 2000 : 60000}
+              />
+
+              {attachmentCount > 0 ? (
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginRight: 6
+                  }}
+                >
+                  <Icon name="attachment" size={SIZE.md} color={colors.icon} />
+                  <Paragraph color={colors.icon} size={SIZE.xs}>
+                    {attachmentCount}
+                  </Paragraph>
+                </View>
+              ) : null}
+
+              {item.pinned ? (
+                <Icon
+                  testID="icon-pinned"
+                  name="pin-outline"
+                  size={SIZE.sm}
+                  style={{
+                    marginRight: 6
+                  }}
+                  color={COLORS_NOTE[item.color?.toLowerCase()] || colors.accent}
+                />
+              ) : null}
+
+              {item.locked ? (
+                <Icon
+                  name="lock"
+                  size={SIZE.sm}
+                  style={{
+                    marginRight: 6
+                  }}
+                  color={colors.icon}
+                />
+              ) : null}
+
+              {item.favorite ? (
+                <Icon
+                  testID="icon-star"
+                  name="star"
+                  size={SIZE.md}
+                  style={{
+                    marginRight: 6
+                  }}
+                  color="orange"
+                />
+              ) : null}
+
+              {!isTrash && !compactMode && tags
+                ? tags.map(item =>
+                    item.id ? (
+                      <Button
+                        title={'#' + item.alias}
+                        key={item.id}
+                        height={23}
+                        type="gray"
+                        textStyle={{
+                          textDecorationLine: 'underline'
+                        }}
+                        hitSlop={{ top: 8, bottom: 12, left: 0, right: 0 }}
+                        fontSize={SIZE.xs}
+                        style={{
+                          borderRadius: 5,
+                          paddingHorizontal: 6,
+                          marginRight: 4,
+                          zIndex: 10,
+                          maxWidth: tags.length > 1 ? 130 : null
+                        }}
+                        onPress={() => navigateToTag(item)}
+                      />
+                    ) : null
+                  )
+                : null}
+            </>
+          ) : (
+            <>
+              <Paragraph
+                color={colors.icon}
+                size={SIZE.xs}
+                style={{
+                  marginRight: 6
+                }}
+              >
+                Deleted on{' '}
+                {item && item.dateDeleted
+                  ? new Date(item.dateDeleted).toISOString().slice(0, 10)
+                  : null}
+              </Paragraph>
+
+              <Paragraph
+                color={colors.accent}
+                size={SIZE.xs}
+                style={{
+                  marginRight: 6
+                }}
+              >
+                {item.itemType[0].toUpperCase() + item.itemType.slice(1)}
+              </Paragraph>
+            </>
+          )}
+        </View>
+      </View>
+      <IconButton
+        testID={notesnook.listitem.menu}
+        color={colors.pri}
+        name="dots-horizontal"
+        size={SIZE.xl}
+        onPress={() => !noOpen && showActionSheet(item, isTrash)}
+        customStyle={{
+          justifyContent: 'center',
+          height: 35,
+          width: 35,
+          borderRadius: 100,
+          alignItems: 'center'
+        }}
+      />
+    </>
+  );
+};
+
+export default NoteItem;

apps/mobile/src/components/listitems/note/wrapper.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import NoteItem from '.';
-import { notesnook } from '../../../e2e/test.ids';
-import { useEditorStore, useSelectionStore, useTrashStore } from '../../provider/stores';
-import { DDS } from '../../services/DeviceDetection';
-import { eSendEvent, openVault, ToastEvent } from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
-import { history } from '../../utils';
-import { db } from '../../utils/database';
-import { eOnLoadNote, eShowMergeDialog } from '../../utils/Events';
-import { tabBarRef } from '../../utils/Refs';
-import { presentDialog } from '../Dialog/functions';
-import SelectionWrapper from '../SelectionWrapper';
+import { notesnook } from '../../../../e2e/test.ids';
+import { useEditorStore, useSelectionStore, useTrashStore } from '../../../provider/stores';
+import { DDS } from '../../../services/DeviceDetection';
+import { eSendEvent, openVault, ToastEvent } from '../../../services/EventManager';
+import Navigation from '../../../services/Navigation';
+import { history } from '../../../utils';
+import { db } from '../../../utils/database';
+import { eOnLoadNote, eShowMergeDialog } from '../../../utils/events';
+import { tabBarRef } from '../../../utils/global-refs';
+import { presentDialog } from '../../dialog/functions';
+import SelectionWrapper from '../selection-wrapper';
 
 export const NoteWrapper = React.memo(
   ({ item, index, tags, dateBy }) => {

apps/mobile/src/components/listitems/notebook/index.js

@@ -1,19 +1,19 @@
 import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { notesnook } from '../../../e2e/test.ids';
-import { useTracked } from '../../provider';
-import { useSettingStore } from '../../provider/stores';
-import { eSendEvent } from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
-import { getTotalNotes, history } from '../../utils';
-import { refreshNotesPage } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { Properties } from '../Properties';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { notesnook } from '../../../../e2e/test.ids';
+import { useTracked } from '../../../provider';
+import { useSettingStore } from '../../../provider/stores';
+import { eSendEvent } from '../../../services/EventManager';
+import Navigation from '../../../services/Navigation';
+import { getTotalNotes, history } from '../../../utils';
+import { refreshNotesPage } from '../../../utils/events';
+import { SIZE } from '../../../utils/size';
+import { IconButton } from '../../ui/icon-button';
+import { Button } from '../../ui/button';
+import { Properties } from '../../properties';
+import Heading from '../../ui/typography/heading';
+import Paragraph from '../../ui/typography/paragraph';
 
 export const NotebookItem = ({ item, isTopic = false, notebookID, isTrash, dateBy }) => {
   const [state] = useTracked();
@@ -186,7 +186,7 @@ export const NotebookItem = ({ item, isTopic = false, notebookID, isTrash, dateB
           ) : null}
         </View>
       </View>
-      <ActionIcon
+      <IconButton
         color={colors.heading}
         name="dots-horizontal"
         testID={notesnook.ids.notebook.menu}

apps/mobile/src/components/listitems/notebook/wrapper.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { NotebookItem } from '.';
-import { useSelectionStore } from '../../provider/stores';
-import { eSendEvent } from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
-import { history } from '../../utils';
-import { eOnNewTopicAdded, refreshNotesPage } from '../../utils/Events';
-import SelectionWrapper from '../SelectionWrapper';
+import { useSelectionStore } from '../../../provider/stores';
+import { eSendEvent } from '../../../services/EventManager';
+import Navigation from '../../../services/Navigation';
+import { history } from '../../../utils';
+import { eOnNewTopicAdded, refreshNotesPage } from '../../../utils/events';
+import SelectionWrapper from '../selection-wrapper';
 
 export const NotebookWrapper = React.memo(
   ({ item, index, dateBy }) => {

apps/mobile/src/components/listitems/selectionwrapper/actionstrip.js

@@ -2,21 +2,21 @@ import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import Animated, { useValue } from 'react-native-reanimated';
-import { useTracked } from '../../provider';
+import { useTracked } from '../../../provider';
 import {
   useMenuStore,
   useNotebookStore,
   useSelectionStore,
   useTrashStore
-} from '../../provider/stores';
-import { openVault, ToastEvent } from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
-import { dWidth, getElevation, toTXT } from '../../utils';
-import { db } from '../../utils/database';
-import { deleteItems } from '../../utils/functions';
-import { ActionIcon } from '../ActionIcon';
-import { Button } from '../Button';
-import { presentDialog } from '../Dialog/functions';
+} from '../../../provider/stores';
+import { openVault, ToastEvent } from '../../../services/EventManager';
+import Navigation from '../../../services/Navigation';
+import { dWidth, getElevation, toTXT } from '../../../utils';
+import { db } from '../../../utils/database';
+import { deleteItems } from '../../../utils/functions';
+import { IconButton } from '../../ui/icon-button';
+import { Button } from '../../ui/button';
+import { presentDialog } from '../../dialog/functions';
 
 export const ActionStrip = ({ note, setActionStrip }) => {
   const [state, dispatch] = useTracked();
@@ -279,7 +279,7 @@ export const ActionStrip = ({ note, setActionStrip }) => {
               marginLeft: 15
             }}
           >
-            <ActionIcon
+            <IconButton
               color={item.color || colors.heading}
               onPress={item.onPress}
               tooltipText={item.title}

apps/mobile/src/components/listitems/selectionwrapper/backfill.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { View } from 'react-native';
-import { useTracked } from '../../provider';
-import { useEditorStore } from '../../provider/stores';
-import { hexToRGBA } from '../../utils/ColorUtils';
+import { useTracked } from '../../../provider';
+import { useEditorStore } from '../../../provider/stores';
+import { hexToRGBA } from '../../../utils/color-scheme/utils';
 
 export const Filler = ({ item, background }) => {
   const [state] = useTracked();

apps/mobile/src/components/listitems/selectionwrapper/index.js

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import { useTracked } from '../../provider';
-import { useSettingStore } from '../../provider/stores';
-import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { history } from '../../utils';
-import { PressableButton } from '../PressableButton';
+import { useTracked } from '../../../provider';
+import { useSettingStore } from '../../../provider/stores';
+import { eSubscribeEvent, eUnSubscribeEvent } from '../../../services/EventManager';
+import { history } from '../../../utils';
+import { PressableButton } from '../../ui/pressable';
 import { ActionStrip } from './action-strip';
 import { Filler } from './back-fill';
 import { SelectionIcon } from './selection';

apps/mobile/src/components/listitems/selectionwrapper/selection.js

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { useTracked } from '../../provider';
-import { Actions } from '../../provider/Actions';
-import { useSelectionStore } from '../../provider/stores';
-import { SIZE } from '../../utils/SizeUtils';
+import { useTracked } from '../../../provider';
+import { Actions } from '../../../provider/Actions';
+import { useSelectionStore } from '../../../provider/stores';
+import { SIZE } from '../../../utils/size';
 
 export const SelectionIcon = ({ setActionStrip, item, compactMode }) => {
   const [state, dispatch] = useTracked();

apps/mobile/src/components/listitems/tag/index.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { useWindowDimensions, View } from 'react-native';
-import { notesnook } from '../../../e2e/test.ids';
-import { PressableButton } from '../../components/PressableButton';
-import { useTracked } from '../../provider';
-import { eSendEvent } from '../../services/EventManager';
-import Navigation from '../../services/Navigation';
-import { db } from '../../utils/database';
-import { refreshNotesPage } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { ActionIcon } from '../ActionIcon';
-import { Properties } from '../Properties';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { notesnook } from '../../../../e2e/test.ids';
+import { PressableButton } from '../../ui/pressable';
+import { useTracked } from '../../../provider';
+import { eSendEvent } from '../../../services/EventManager';
+import Navigation from '../../../services/Navigation';
+import { db } from '../../../utils/database';
+import { refreshNotesPage } from '../../../utils/events';
+import { SIZE } from '../../../utils/size';
+import { IconButton } from '../../ui/icon-button';
+import { Properties } from '../../properties';
+import Heading from '../../ui/typography/heading';
+import Paragraph from '../../ui/typography/paragraph';
 
 const TagItem = React.memo(
   ({ item, index }) => {
@@ -80,7 +80,7 @@ const TagItem = React.memo(
           </Paragraph>
         </View>
 
-        <ActionIcon
+        <IconButton
           color={colors.heading}
           name="dots-horizontal"
           size={SIZE.xl}

apps/mobile/src/components/premium/component.js

@@ -13,20 +13,20 @@ import {
   eCloseProgressDialog,
   eOpenLoginDialog,
   eOpenResultDialog
-} from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import umami from '../../utils/umami';
-import { ActionIcon } from '../ActionIcon';
-import { AuthMode } from '../Auth';
-import { Button } from '../Button';
-import GeneralSheet from '../GeneralSheet';
-import { SvgToPngView } from '../ListPlaceholders';
-import Seperator from '../Seperator';
-import { Toast } from '../Toast';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
-import { Walkthrough } from '../Walkthrough';
+} from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import umami from '../../utils/analytics';
+import { IconButton } from '../ui/icon-button';
+import { AuthMode } from '../auth';
+import { Button } from '../ui/button';
+import SheetProvider from '../sheet-provider';
+import { SvgView } from '../ui/svg';
+import Seperator from '../ui/seperator';
+import { Toast } from '../toast';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
+import { Walkthrough } from '../walkthroughs';
 import { features } from './features';
 import { Group } from './group';
 import { PricingPlans } from './pricing-plans';
@@ -77,8 +77,8 @@ export const Component = ({ close, promo, getRef }) => {
         maxHeight: '100%'
       }}
     >
-      <GeneralSheet context="pricing_plans" />
-      <ActionIcon
+      <SheetProvider context="pricing_plans" />
+      <IconButton
         onPress={() => {
           close();
         }}
@@ -111,7 +111,7 @@ export const Component = ({ close, promo, getRef }) => {
             justifyContent: 'center'
           }}
         >
-          <SvgToPngView width={350} height={350} src={LAUNCH_ROCKET(colors.accent)} />
+          <SvgView width={350} height={350} src={LAUNCH_ROCKET(colors.accent)} />
         </View>
 
         <Heading

apps/mobile/src/components/premium/expiring.js

@@ -3,15 +3,15 @@ import { View } from 'react-native';
 import { useTracked } from '../../provider';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import PremiumService from '../../services/PremiumService';
-import { eOpenPremiumDialog, eOpenResultDialog, eOpenTrialEndingDialog } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import { Button } from '../Button';
-import BaseDialog from '../Dialog/base-dialog';
-import DialogContainer from '../Dialog/dialog-container';
-import Seperator from '../Seperator';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { eOpenPremiumDialog, eOpenResultDialog, eOpenTrialEndingDialog } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import { Button } from '../ui/button';
+import BaseDialog from '../dialog/base-dialog';
+import DialogContainer from '../dialog/dialog-container';
+import Seperator from '../ui/seperator';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { CompactFeatures } from './compact-features';
 import { Offer } from './offer';
 

apps/mobile/src/components/premium/feature.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { Text, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import Paragraph from '../ui/typography/paragraph';
 import { ProTag } from './pro-tag';
 
 export const FeatureBlock = ({ vertical, highlight, content, icon, pro, proTagBg }) => {

apps/mobile/src/components/premium/group.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { ScrollView, View } from 'react-native';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 import { FeatureBlock } from './feature';
 import { ProTag } from './pro-tag';
 

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

@@ -1,7 +1,7 @@
 import React, { createRef } from 'react';
 import { eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
-import { eClosePremiumDialog, eOpenPremiumDialog } from '../../utils/Events';
-import BaseDialog from '../Dialog/base-dialog';
+import { eClosePremiumDialog, eOpenPremiumDialog } from '../../utils/events';
+import BaseDialog from '../dialog/base-dialog';
 import { Component } from './component';
 
 class PremiumDialog extends React.Component {

apps/mobile/src/components/premium/offer.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Text } from 'react-native';
 import { useTracked } from '../../provider';
-import { SIZE } from '../../utils/SizeUtils';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import Paragraph from '../ui/typography/paragraph';
 
 export const Offer = ({ off = '30', text = 'on yearly plan, offer ends soon', padding = 0 }) => {
   const [state, dispatch] = useTracked();

apps/mobile/src/components/premium/premiumtoast.js

@@ -5,14 +5,14 @@ import { useTracked } from '../../provider';
 import { DDS } from '../../services/DeviceDetection';
 import { eSendEvent, eSubscribeEvent, eUnSubscribeEvent } from '../../services/EventManager';
 import { dWidth, editing, getElevation } from '../../utils';
-import { eCloseActionSheet, eOpenPremiumDialog, eShowGetPremium } from '../../utils/Events';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
+import { eCloseActionSheet, eOpenPremiumDialog, eShowGetPremium } from '../../utils/events';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
 import { EditorWebView } from '../../views/Editor/Functions';
 import tiny from '../../views/Editor/tiny/tiny';
-import { Button } from '../Button';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { Button } from '../ui/button';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const translatePrem = new Animated.Value(-dWidth);
 export const opacityPrem = new Animated.Value(0);

apps/mobile/src/components/premium/pricingitem.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { View } from 'react-native';
 import { useTracked } from '../../provider';
 import { getElevation } from '../../utils';
-import { SIZE } from '../../utils/SizeUtils';
-import { PressableButton } from '../PressableButton';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
+import { SIZE } from '../../utils/size';
+import { PressableButton } from '../ui/pressable';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
 
 export const PricingItem = ({ product, onPress, compact }) => {
   const [state, dispatch] = useTracked();

apps/mobile/src/components/premium/pricingplans.js

@@ -11,18 +11,18 @@ import {
   eCloseProgressDialog,
   eCloseSimpleDialog,
   eOpenLoginDialog
-} from '../../utils/Events';
+} from '../../utils/events';
 import { openLinkInBrowser } from '../../utils/functions';
-import { SIZE } from '../../utils/SizeUtils';
-import { sleep } from '../../utils/TimeUtils';
-import umami from '../../utils/umami';
-import { Button } from '../Button';
-import { Dialog } from '../Dialog';
-import BaseDialog from '../Dialog/base-dialog';
-import { presentDialog } from '../Dialog/functions';
-import Heading from '../Typography/Heading';
-import Paragraph from '../Typography/Paragraph';
-import { Walkthrough } from '../Walkthrough';
+import { SIZE } from '../../utils/size';
+import { sleep } from '../../utils/time';
+import umami from '../../utils/analytics';
+import { Button } from '../ui/button';
+import { Dialog } from '../dialog';
+import BaseDialog from '../dialog/base-dialog';
+import { presentDialog } from '../dialog/functions';
+import Heading from '../ui/typography/heading';
+import Paragraph from '../ui/typography/paragraph';
+import { Walkthrough } from '../walkthroughs';
 import { PricingItem } from './pricing-item';
 
 const promoCyclesMonthly = {

apps/mobile/src/components/premium/protag.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTracked } from '../../provider';
-import Paragraph from '../Typography/Paragraph';
+import Paragraph from '../ui/typography/paragraph';
 
 export const ProTag = ({ width, size, background }) => {
   const [state] = useTracked();