Fix datetime bug

android/app/src/main/res/values/styles.xml

@@ -1,8 +1,7 @@
 <resources xmlns:tools="http://schemas.android.com/tools">
-  <style name="AppTheme" parent="Theme.EdgeToEdge.Light">
+  <style name="AppTheme" parent="Theme.EdgeToEdge">
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
-    <item name="enforceNavigationBarContrast">false</item>
   </style>
   <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
     <item name="windowSplashScreenBackground">@color/splashscreen_background</item>

app.config.js

@@ -36,8 +36,8 @@ module.exports = {
                 "react-native-edge-to-edge",
                 {
                     "android": {
-                        "parentTheme": "Light",
+                        // "parentTheme": "Light",
-                        "enforceNavigationBarContrast": false
+                        // "enforceNavigationBarContrast": false
                     }
                 }
             ],

app/(tabs)/_layout.tsx

@@ -8,94 +8,94 @@ import TabBarBackground from '@/components/ui/TabBarBackground';
 import { lightTheme, darkTheme } from '@/constants/Colors';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ThemedView } from '@/components/ThemedView';
+import { IconButton } from 'react-native-paper';
+import { useNavigation } from '@react-navigation/native';
+import { ThemedText } from '@/components/ThemedText';
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
   const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
   const insets = useSafeAreaInsets();
+  const navigation = useNavigation();
 
   return (
-    <View style={{ flex: 1 }}>
+    <SafeAreaView style={{ flex: 1, paddingBottom: 5 }} edges={['top', 'left', 'right']}>
-      <View
+      <ThemedView style={{ flex: 1 }}>
-        // Top status bar background
+        <View style={{
-        style={{
+          backgroundColor: theme.colors.onPrimary,
           position: 'absolute',
-          top: 0,
+          display: 'flex',
-          left: 0,
+          flexDirection: 'row',
-          right: 0,
+          alignItems: 'center',
-          height: insets.top,
+          justifyContent: 'space-between',
-          backgroundColor: theme.colors.primary, // Or any custom color
+          top: 20,
+          left: 20,
+          right: 20,
+          borderRadius: 12,
           zIndex: 1000,
-        }}
+        }}>
-      />
+          <IconButton icon="menu" size={24} onPress={() => {
-      <View
+            navigation.dispatch({ type: 'OPEN_DRAWER' });
-        // Bottom navigation bar background
+          }} />
-        style={{
+          <ThemedText
-          position: 'absolute',
+            style={{ fontSize: 15, color: theme.colors.primary, letterSpacing: 2, fontWeight: 'bold' }}
-          bottom: 0,
+          >JOURNEY</ThemedText>
-          left: 0,
+          <IconButton icon="magnify" size={24} onPress={() => {
-          right: 0,
+            console.log('Search pressed');
-          height: insets.bottom,
+          }} />
-          backgroundColor: theme.colors.primary, // Or any custom color
+        </View>
-          zIndex: 1000,
+        <Tabs
-        }}
+          screenOptions={{
-      />
+            tabBarActiveTintColor: theme.colors.primary,
-
+            headerShown: false,
-      <SafeAreaView style={{ flex: 1, paddingBottom: 5 }} edges={['top', 'left', 'right']}>
+            tabBarLabelPosition: 'below-icon',
-        <ThemedView style={{ flex: 1 }}>
+            tabBarButton: HapticTab,
-          <Tabs
+            tabBarStyle: Platform.select({
-            screenOptions={{
+              ios: {
-              tabBarActiveTintColor: theme.colors.primary,
+                // Use a transparent background on iOS to show the blur effect
-              headerShown: false,
+                position: 'absolute',
-              tabBarLabelPosition: 'below-icon',
+              },
-              tabBarButton: HapticTab,
+              default: {
-              tabBarBackground: TabBarBackground,
+              },
-              tabBarStyle: Platform.select({
+            }),
-                ios: {
+          }}>
-                  // Use a transparent background on iOS to show the blur effect
+          <Tabs.Screen
-                  position: 'absolute',
+            name="index"
-                },
+            options={{
-                default: {},
+              title: 'Journey',
-              }),
+              tabBarIcon: ({ color }) => <IconSymbol size={28} name="book" color={color} />,
-            }}>
+            }}
-            <Tabs.Screen
+          />
-              name="index"
+          <Tabs.Screen
-              options={{
+            name="calendar"
-                title: 'Journey',
+            options={{
-                tabBarIcon: ({ color }) => <IconSymbol size={28} name="book" color={color} />,
+              title: 'Calendar',
-              }}
+              tabBarIcon: ({ color }) => <IconSymbol size={28} name="calendar-today" color={color} />,
-            />
+            }}
-            <Tabs.Screen
+          />
-              name="calendar"
+          <Tabs.Screen
-              options={{
+            name="media"
-                title: 'Calendar',
+            options={{
-                tabBarIcon: ({ color }) => <IconSymbol size={28} name="calendar-today" color={color} />,
+              title: 'Media',
-              }}
+              tabBarIcon: ({ color }) => <IconSymbol size={28} name="photo" color={color} />,
-            />
+            }}
-            <Tabs.Screen
+          />
-              name="media"
+          <Tabs.Screen
-              options={{
+            name="atlas"
-                title: 'Media',
+            options={{
-                tabBarIcon: ({ color }) => <IconSymbol size={28} name="photo" color={color} />,
+              title: 'Atlas',
-              }}
+              tabBarIcon: ({ color }) => <IconSymbol size={28} name="map" color={color} />,
-            />
+            }}
-            <Tabs.Screen
+          />
-              name="atlas"
+          <Tabs.Screen
-              options={{
+            name="today"
-                title: 'Atlas',
+            options={{
-                tabBarIcon: ({ color }) => <IconSymbol size={28} name="map" color={color} />,
+              title: 'Today',
-              }}
+              tabBarIcon: ({ color }) => <IconSymbol size={28} name="inbox" color={color} />,
-            />
+            }}
-            <Tabs.Screen
+          />
-              name="today"
+        </Tabs>
-              options={{
+      </ThemedView>
-                title: 'Today',
+    </SafeAreaView>
-                tabBarIcon: ({ color }) => <IconSymbol size={28} name="inbox" color={color} />,
-              }}
-            />
-          </Tabs>
-        </ThemedView>
-      </SafeAreaView>
-    </View>
   );
 }

app/(tabs)/index.tsx

@@ -1,55 +0,0 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet, useColorScheme, View } from 'react-native';
-
-import { HelloWave } from '@/components/HelloWave';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { List, Text, useTheme } from 'react-native-paper';
-import { useEffect, useState } from 'react';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { DATA_DIRECTORY_URI_KEY } from '@/constants/Settings';
-
-export default function HomeScreen() {
-  const [dataDirectoryUri, setDirectoryUri] = useState<string | null>(null);
-
-  useEffect(() => {
-    const loadDirectoryUri = async () => {
-      try {
-        const savedUri = await AsyncStorage.getItem(DATA_DIRECTORY_URI_KEY);
-        if (savedUri) {
-          setDirectoryUri(savedUri);
-        }
-      } catch (error) {
-        console.error('Error loading directory URI:', error);
-      }
-    };
-
-    loadDirectoryUri();
-  }, []);
-
-  const theme = useTheme();
-
-  return (
-    <ThemedView style={{ flex: 1, padding: 16 }}>
-      <ThemedText type="title">
-        My Journey
-      </ThemedText>
-      <ThemedText>{theme.colors.primary}</ThemedText>
-    </ThemedView>
-  );
-}
-
-const styles = StyleSheet.create({
-  stepContainer: {
-    gap: 8,
-    marginBottom: 8,
-  },
-  headerImage: {
-    width: 200,
-    height: 200,
-    bottom: 0,
-    left: 20,
-    position: 'absolute',
-  },
-});

app/Editor.tsx

@@ -0,0 +1,237 @@
+import Wrapper from '@/components/ui/Wrapper';
+import { useFileSystem } from '@/hooks/useFilesystem';
+import { CoreBridge, PlaceholderBridge, RichText, TenTapStartKit, Toolbar, useEditorBridge, useEditorContent } from '@10play/tentap-editor';
+import { useRoute } from '@react-navigation/native';
+import { format } from 'date-fns';
+import { StorageAccessFramework } from 'expo-file-system';
+import { useRouter } from 'expo-router';
+import { marked } from 'marked';
+import React, { useEffect, useState } from 'react';
+import { Keyboard, View } from 'react-native';
+import { Appbar, Button, Dialog, Menu, Portal, Text, useTheme } from 'react-native-paper';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import turndown from 'turndown-rn';
+
+export default function EditorScreen() {
+    const [entryText, setEntryText] = useState<string>('');
+    const [stats, setStats] = useState<{ words: number; characters: number }>({
+        words: 0,
+        characters: 0,
+    });
+
+    useEffect(() => {
+        const words = entryText.trim().split(/\s+/).filter(Boolean).length;
+        const characters = entryText.length;
+        setStats({ words, characters });
+    }
+        , [entryText]);
+
+    const navigation = useRouter();
+    const route = useRoute();
+    const { writeFile, deleteFile } = useFileSystem();
+    const { fileUri, fileDatetime } = route.params as { fileUri: string | undefined, fileDatetime: Date } || { fileUri: undefined, fileDatetime: new Date() };
+    const [loadedContents, setLoadedContents] = useState<string>("");
+    const [menuVisible, setMenuVisible] = useState<boolean>(false);
+    const [dialogVisible, setDialogVisible] = useState<boolean>(false);
+    const openMenu = () => { setMenuVisible(true); };
+    const closeMenu = () => { setMenuVisible(false); };
+    const openDialog = () => { setDialogVisible(true); };
+    const closeDialog = () => { setDialogVisible(false); };
+
+
+    const loadFileContent = async (fileUri: string, forceReload = false) => {
+        try {
+            // Replace with your actual file reading logic
+            const content = await StorageAccessFramework.readAsStringAsync(fileUri);
+            setLoadedContents(await marked.parse(content));
+            return (await marked.parse(content));
+        } catch (error) {
+            console.error('Error loading file content:', error);
+        }
+    };
+
+    const saveFileContent = async () => {
+        console.log("Begin Save");
+        // try{
+
+        // }
+        // catch (error) {
+        //     console.error("Error creating file:", error);
+        //     return;
+        // }
+        try {
+            if (!content.html) return;
+
+            // Convert HTML back to markdown
+            const turndownService = new turndown({
+                headingStyle: 'atx',
+                hr: '---',
+                bulletListMarker: '-',
+                codeBlockStyle: 'fenced',
+                fence: '```',
+                emDelimiter: '*',
+                strongDelimiter: '**',
+                linkStyle: 'inlined',
+                linkReferenceStyle: 'full',
+            });
+
+            // Optional: Add custom rules for better conversion
+            turndownService.addRule('strikethrough', {
+                filter: ['del', 's'],
+                replacement: (content: string) => `~~${content}~~`
+            });
+
+            turndownService.addRule('underline', {
+                filter: ['u', 'ins'],
+                replacement: (content: string) => `<u>${content}</u>`
+            });
+            const markdownContent = turndownService.turndown(content.html);
+            if (markdownContent == turndownService.turndown(loadedContents)) { console.log("Skipping..."); return; }
+
+            // Save the markdown content
+            await writeFile(fileUri ?? format(fileDatetime, 't'), markdownContent);
+            console.log(`${fileDatetime} saved successfully`);
+
+        } catch (error) {
+            console.error(`Error saving ${fileUri}:`, error);
+        }
+    };
+    useEffect(() => {
+        if (fileUri) {
+            loadFileContent(fileUri);
+        }
+    }, [fileUri]);
+    useEffect(() => {
+        editor.setContent(loadedContents);
+    }, [loadedContents]);
+
+    const theme = useTheme();
+    const entryDate = format(fileDatetime, 'LLL d, h:mm aaa');
+
+    const insets = useSafeAreaInsets();
+    const [keyboardHeight, setKeyboardHeight] = useState(0);
+    useEffect(() => {
+        const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', () => {
+            setKeyboardHeight(Keyboard.metrics()?.height || 0);
+        });
+        const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', () => {
+            setKeyboardHeight(0);
+        });
+
+        return () => {
+            keyboardDidShowListener.remove();
+            keyboardDidHideListener.remove();
+        };
+    }, []);
+    const editor = useEditorBridge({
+        autofocus: true,
+        avoidIosKeyboard: true,
+        theme: {
+            webviewContainer: {
+                paddingLeft: 15,
+                backgroundColor: theme.colors.surface,
+            },
+        },
+        bridgeExtensions: [
+            ...TenTapStartKit,
+            CoreBridge.configureCSS(`
+                * {
+                    font-size: 14px;
+                }
+                `),
+            PlaceholderBridge.configureExtension({
+                placeholder: '',
+            }),
+        ],
+        initialContent: loadedContents,
+    });
+    const content = {
+        html: useEditorContent(editor, { type: 'html' }),
+        text: useEditorContent(editor, { type: 'text' }),
+    };
+    useEffect(() => {
+        content.text && setEntryText(content.text ?? 'Nothing loaded.');
+    }, [content]);
+    return (
+        <Wrapper>
+            <Appbar.Header style={{
+                backgroundColor: theme.colors.primary,
+                borderBottomWidth: 2,
+                borderBottomColor: theme.colors.backdrop,
+            }}>
+                {
+
+                    content.text && content.text != loadedContents ?
+                        <Appbar.Action icon="check" onPress={() => {
+                            saveFileContent();
+                            navigation.back();
+                        }} />
+                        :
+                        <Appbar.BackAction onPress={() => {
+                            navigation.back();
+                        }} />
+
+                }
+                <Appbar.Content title={entryDate}
+                    titleStyle={{
+                        fontSize: 16, fontWeight: 'bold',
+                    }}
+                />
+                <Appbar.Action icon="calendar" onPress={() => { }} />
+                <Appbar.Action icon="tag" onPress={() => { }} />
+                <Menu
+                    visible={menuVisible}
+                    onDismiss={closeMenu}
+                    anchor={<Appbar.Action icon="dots-vertical" onPress={() => {
+                        openMenu();
+                    }} />}>
+                    <Menu.Item onPress={() => {
+                        navigation.back();
+                        closeMenu();
+                    }} title="Cancel" />
+                    <Menu.Item onPress={() => {
+                        openDialog();
+                        closeMenu();
+                    }} title="Delete" />
+                </Menu>
+            </Appbar.Header>
+            <Portal>
+                <Dialog visible={dialogVisible} onDismiss={closeDialog}>
+                    <Dialog.Title>Delete file?</Dialog.Title>
+                    <Dialog.Content>
+                        <Text>Entry for
+                            {' '}
+                            <Text style={{ fontWeight: 'bold' }}>
+                                {format(fileDatetime, "MMM dd, yyyy, HH:mm:ss")}</Text> will be permanently deleted.</Text>
+                    </Dialog.Content>
+                    <Dialog.Actions>
+                        <Button onPress={() => {
+                            closeDialog()
+                        }}>Cancel</Button>
+                        <Button onPress={() => {
+                            if (fileUri) { deleteFile(fileUri); }
+                            navigation.back();
+                            closeDialog()
+                        }}>Done</Button>
+                    </Dialog.Actions>
+                </Dialog>
+            </Portal>
+            {/* <SafeAreaView style={{ flex: 1, backgroundColor: theme.colors.background }}> */}
+            <RichText editor={editor} style={{ marginTop: 10, }} />
+            <View
+                // horizontal={true}
+                // keyboardShouldPersistTaps="always"
+                style={{
+                    position: 'absolute',
+                    bottom: keyboardHeight + insets.bottom,
+                    left: 10,
+                    right: 0,
+                    flexDirection: 'row',
+                }}>
+                <Toolbar editor={editor} hidden={false} />
+            </View>
+            {/* </SafeAreaView> */}
+
+        </Wrapper>
+    );
+};

app/HomeScreen.tsx

@@ -0,0 +1,206 @@
+import { RefreshControl, StyleSheet, View, ViewToken } from 'react-native';
+
+import { ThemedText } from '@/components/ThemedText';
+import { ThemedView } from '@/components/ThemedView';
+import { prettyName, useFileSystem } from '@/hooks/useFilesystem';
+import { format } from 'date-fns';
+import { StorageAccessFramework } from 'expo-file-system';
+import { useNavigation } from 'expo-router';
+import { useCallback, useState } from 'react';
+import { FlatList } from 'react-native-gesture-handler';
+import Markdown from 'react-native-markdown-display';
+import { ActivityIndicator, FAB, Text, TouchableRipple, useTheme } from 'react-native-paper';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+
+export default function HomeScreen() {
+  const navigation = useNavigation();
+  const theme = useTheme();
+  const styles = StyleSheet.create({
+    fab: {
+      position: 'absolute',
+      margin: 16,
+      right: 0,
+      bottom: 0,
+      backgroundColor: theme.colors.primary, // Use your theme's primary color
+    },
+    container: {
+      backgroundColor: theme.colors.primary,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      height: 100,
+      zIndex: 1000,
+    },
+    safeArea: {
+      flex: 1,
+      marginTop: 100,
+      backgroundColor: theme.colors.surface,
+      // padding: 10
+    },
+    entryCard: {
+      backgroundColor: theme.colors.surface,
+      height: 150
+      ,
+      alignItems: 'center',
+    },
+  });
+  const { dataDirectoryUri, loadFiles, files, directorySize } = useFileSystem();
+  const [refreshing, setRefreshing] = useState(false);
+  const [loadedContents, setLoadedContents] = useState<Map<string, string>>(new Map());
+  const [lastViewableItems, setLastViewableItems] = useState<ViewToken[]>([]);
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    setLoadedContents(new Map()); // Clear cached content
+    await loadFiles();
+
+    // Reload content for currently visible items
+    lastViewableItems.forEach(({ item }) => {
+      loadFileContent(item.uri, true); // Force reload
+    });
+    setRefreshing(false);
+  };
+
+
+  const loadFileContent = async (fileUri: string, forceReload = false) => {
+    if (loadedContents.has(fileUri) && !forceReload) return; // Already loaded
+
+    try {
+      // Replace with your actual file reading logic
+      const content = await StorageAccessFramework.readAsStringAsync(fileUri);
+      setLoadedContents(prev => new Map(prev).set(fileUri, content));
+    } catch (error) {
+      console.error('Error loading file content:', error);
+    }
+  };
+
+  const onViewableItemsChanged = useCallback(({ viewableItems }: { viewableItems: ViewToken[] }) => {
+    setLastViewableItems(viewableItems); // Track visible items
+    viewableItems.forEach(({ item }) => {
+      loadFileContent(item.uri);
+    });
+  }, []);
+
+  const entryPreview = (fileUri: string) => {
+    if (!loadedContents.has(fileUri)) return null;
+    const preview = loadedContents.get(fileUri)?.slice(0, 200);
+    if (!preview) return null; // No content to show
+    const extra = loadedContents.get(fileUri)?.slice(200);
+    if (!extra) return preview; // No extra content to show
+
+    const extraLength = extra.trim().split(/\s+/).filter(Boolean).length;
+    return preview! + (extra ?
+      ` *[... ${extraLength} words]*`
+      :
+      '');
+  };
+
+  const renderFileItem = ({ item: f }: { item: typeof files[0] }) => (
+    <TouchableRipple key={f.uri} style={styles.entryCard}
+      onPress={() => {
+        navigation.navigate('Editor', {
+          fileUri: f.uri, fileDatetime: f.datetime
+        },
+        );
+      }}
+    >
+      <View style={{
+        width: '90%',
+        height: '100%',
+        paddingTop: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: theme.colors.background,
+      }}>
+        <ThemedText style={{ fontWeight: "bold" }}>
+          {format(f.datetime, "hh:mm aaa")}
+        </ThemedText>
+        {loadedContents.has(f.uri) && (
+          <Markdown
+            style={{
+              body: {
+                color: theme.colors.onSurface,
+                fontSize: 13,
+                marginTop: 10,
+              },
+              paragraph: {
+                marginTop: 0,
+                marginBottom: 10,
+              },
+              heading1: {
+                color: theme.colors.primary,
+                fontSize: 18,
+                fontWeight: 'bold',
+              },
+              heading2: {
+                color: theme.colors.primary,
+                fontSize: 16,
+                fontWeight: 'bold',
+              },
+              strong: {
+                fontWeight: 'bold',
+                color: theme.colors.onSurface,
+              },
+              em: {
+                fontStyle: 'italic',
+              },
+              code_inline: {
+                backgroundColor: theme.colors.surfaceVariant,
+                padding: 2,
+                borderRadius: 3,
+              },
+            }}
+          >
+            {entryPreview(f.uri)
+              ||
+              <ActivityIndicator />
+            }
+          </Markdown>
+        )}
+      </View>
+    </TouchableRipple>
+  );
+
+  return (
+    <ThemedView style={{ flex: 1 }}>
+      <View style={styles.container} />
+      <SafeAreaView edges={['left', 'right']} style={styles.safeArea}>
+        <FlatList
+          data={files}
+          renderItem={renderFileItem}
+          keyExtractor={(item) => item.uri}
+          onViewableItemsChanged={onViewableItemsChanged}
+          viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
+          refreshControl={
+            <RefreshControl
+              refreshing={refreshing}
+              onRefresh={onRefresh}
+              tintColor={theme.colors.primary}
+              colors={[theme.colors.primary]}
+            />
+          }
+          ListHeaderComponent={
+            <View style={{
+              marginBottom: 16,
+              backgroundColor: theme.colors.secondary,
+              padding: 2,
+              paddingLeft: 10
+            }}>
+              <Text style={{ color: theme.colors.surface, fontSize: 10 }}>
+                <Text style={{ fontWeight: "bold" }}>
+                  {prettyName(dataDirectoryUri, { pathContext: 'full' })}:
+                </Text>
+                {' '}{files.length} {files.length == 1 ? "entry" : "entries"}, {directorySize} MB
+              </Text>
+            </View>
+          }
+        />
+        <FAB icon="plus" color={theme.colors.onPrimary} style={styles.fab} onPress={() => {
+          navigation.navigate('Editor' as never);
+        }} />
+      </SafeAreaView>
+    </ThemedView>
+  );
+}
+

app/SettingsScreen.tsx

@@ -6,67 +6,25 @@ import { Directory, Paths } from 'expo-file-system/next';
 import { StorageAccessFramework } from 'expo-file-system';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { DATA_DIRECTORY_URI_KEY } from '@/constants/Settings';
+import { useFileSystem, prettyName } from '@/hooks/useFilesystem';
 
 
-const prettyName = (uri: string | null) => {
-    if (!uri) return null;
-    const decodedUri = decodeURIComponent(uri);
-    const match = decodedUri.match(/.*\/primary:(.+)/);
-
-    if (match) {
-        return match[1];
-    }
-
-    // Fallback to your original logic
-    return uri.split('%3A').pop() || "Unknown";
-
-}
-
 export default function SettingsScreen() {
-    const [directoryUri, setDirectoryUri] = useState<string | null>(null);
+    const { dataDirectoryUri, isLoading, files, hasDirectory, saveDataDirectoryUri } = useFileSystem();
-    // Load saved directory URI on component mount
-    useEffect(() => {
-        const loadDirectoryUri = async () => {
-            try {
-                const savedUri = await AsyncStorage.getItem(DATA_DIRECTORY_URI_KEY);
-                if (savedUri) {
-                    setDirectoryUri(savedUri);
-                }
-            } catch (error) {
-                console.error('Error loading directory URI:', error);
-            }
-        };
-
-        loadDirectoryUri();
-    }, []);
-
-    // Save directory URI whenever it changes
-    const saveDirectoryUri = async (uri: string | null) => {
-        try {
-            if (uri) {
-                await AsyncStorage.setItem(DATA_DIRECTORY_URI_KEY, uri);
-            } else {
-                await AsyncStorage.removeItem(DATA_DIRECTORY_URI_KEY);
-            }
-            setDirectoryUri(uri);
-        } catch (error) {
-            console.error('Error saving directory URI:', error);
-        }
-    };
 
     return (
         <View style={{ flex: 1, padding: 16, backgroundColor: 'white' }}>
             <List.Section title="Data" style={{ backgroundColor: 'white', }} titleStyle={{ fontSize: 24, fontWeight: 'bold' }}>
                 <List.Item
                     left={props => <List.Icon {...props} icon="folder" />}
-                    title={prettyName(directoryUri) ?? "No directory selected. Tap to select."}
+                    title={prettyName(dataDirectoryUri) ?? "No directory selected. Tap to select."}
                     right={props => <List.Icon {...props} icon="chevron-right" />}
 
                     onPress={async () => {
                         try {
                             const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync();
                             if (permissions.granted) {
-                                await saveDirectoryUri(permissions.directoryUri);
+                                await saveDataDirectoryUri(permissions.directoryUri);
                             }
                         } catch (err) {
                             console.error(err);
@@ -75,12 +33,12 @@ export default function SettingsScreen() {
                 />
             </List.Section>
             <Button title="Debug: List Files" onPress={async () => {
-                if (!directoryUri) {
+                if (!dataDirectoryUri) {
                     console.warn("No directory set.");
                     return;
                 }
                 try {
-                    const dir = await StorageAccessFramework.readDirectoryAsync(directoryUri);
+                    const dir = await StorageAccessFramework.readDirectoryAsync(dataDirectoryUri);
                     console.log("Directory contents:", dir.map((file, i) => prettyName(file)));
                 } catch (error) {
                     console.error("Error reading directory:", error);

app/_layout.tsx

@@ -1,10 +1,10 @@
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import 'react-native-reanimated';
-import { PaperProvider } from 'react-native-paper';
+import { IconButton, PaperProvider } from 'react-native-paper';
 import * as NavigationBar from 'expo-navigation-bar';
 
 import { Platform, useColorScheme } from 'react-native';
@@ -14,22 +14,126 @@ import { IconSymbol } from '@/components/ui/IconSymbol';
 import { TouchableOpacity, View } from 'react-native';
 import NullComponent from '@/components/NullComponent';
 import { useEffect } from 'react';
+import EditorScreen from './Editor';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+
+// Import your tab screens directly
+import HomeScreen from './HomeScreen';
+import CalendarScreen from './(tabs)/calendar';
+import MediaScreen from './(tabs)/media';
+import AtlasScreen from './(tabs)/atlas';
+import TodayScreen from './(tabs)/today';
+import { ThemedView } from '@/components/ThemedView';
+import { useNavigation } from 'expo-router';
+import { ThemedText } from '@/components/ThemedText';
+import Wrapper from '@/components/ui/Wrapper';
 
 const Drawer = createDrawerNavigator();
 const RootStack = createNativeStackNavigator();
+const Tab = createBottomTabNavigator();
 
 function TabsNavigator() {
+  const colorScheme = useColorScheme();
+  const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
+  const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
+
   return (
-    <Stack>
+    <Wrapper>
-      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      <SafeAreaView
-      <Stack.Screen name="+not-found" />
+        edges={['top', 'left', 'right']}
-    </Stack>
+        style={{
+          flex: 1,
+        }}>
+        <View style={{
+          backgroundColor: theme.colors.onPrimary,
+          position: 'absolute',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          top: insets.top + 20,
+          left: 20,
+          right: 20,
+          borderRadius: 12,
+          zIndex: 1000,
+        }}>
+          <IconButton icon="menu" size={24} onPress={() => {
+            navigation.dispatch({ type: 'OPEN_DRAWER' });
+          }} />
+          <ThemedText
+            style={{ fontSize: 15, color: theme.colors.primary, letterSpacing: 2, fontWeight: 'bold' }}
+          >JOURNEY</ThemedText>
+          <IconButton icon="magnify" size={24} onPress={() => {
+            console.log('Search pressed');
+          }} />
+        </View><Tab.Navigator
+          screenOptions={{
+            tabBarActiveTintColor: theme.colors.primary,
+            headerShown: false,
+            tabBarStyle: Platform.select({
+              ios: {
+                position: 'absolute',
+              },
+              default: {},
+            }),
+          }}
+        >
+          <Tab.Screen
+            name="Journey"
+            component={HomeScreen}
+            options={{
+              tabBarIcon: ({ color, size }) => (
+                <IconSymbol name="book" size={size} color={color} />
+              ),
+            }}
+          />
+          <Tab.Screen
+            name="Calendar"
+            component={CalendarScreen}
+            options={{
+              tabBarIcon: ({ color, size }) => (
+                <IconSymbol name="calendar-today" size={size} color={color} />
+              ),
+            }}
+          />
+          <Tab.Screen
+            name="Media"
+            component={MediaScreen}
+            options={{
+              tabBarIcon: ({ color, size }) => (
+                <IconSymbol name="photo" size={size} color={color} />
+              ),
+            }}
+          />
+          <Tab.Screen
+            name="Atlas"
+            component={AtlasScreen}
+            options={{
+              tabBarIcon: ({ color, size }) => (
+                <IconSymbol name="map" size={size} color={color} />
+              ),
+            }}
+          />
+          <Tab.Screen
+            name="Today"
+            component={TodayScreen}
+            options={{
+              tabBarIcon: ({ color, size }) => (
+                <IconSymbol name="today" size={size} color={color} />
+              ),
+            }}
+          />
+        </Tab.Navigator>
+      </SafeAreaView>
+    </Wrapper>
   );
 }
 
 function DrawerNavigator() {
   const colorScheme = useColorScheme();
   const theme = colorScheme === 'dark' ? darkTheme : lightTheme;
+
   return (
     <Drawer.Navigator>
       <Drawer.Screen
@@ -53,23 +157,23 @@ function DrawerNavigator() {
         <Drawer.Screen
           name="SettingsDrawerItem"
           component={NullComponent}
-          options={({ navigation }) => ({
+          options={{
             title: 'Settings',
             headerShown: false,
             drawerLabel: 'Settings',
             drawerIcon: ({ color }) => (
               <IconSymbol name="settings" size={24} color={color} />
             ),
-          })}
+          }}
           listeners={({ navigation }) => ({
             drawerItemPress: (e) => {
               e.preventDefault();
-              // Navigate to the Settings screen in the root stack
               navigation.getParent()?.navigate('Settings');
               navigation.dispatch({ type: 'CLOSE_DRAWER' });
             },
           })}
-        /></Drawer.Group>
+        />
+      </Drawer.Group>
     </Drawer.Navigator>
   );
 }
@@ -87,19 +191,18 @@ export default function RootLayout() {
     }
   }, [colorScheme]);
 
-
   if (!loaded) {
     return null;
   }
 
   return (
     <PaperProvider theme={theme}>
+
       <RootStack.Navigator>
         <RootStack.Screen
           name="Main"
           component={DrawerNavigator}
           options={{ headerShown: false }}
-
         />
         <RootStack.Screen
           name="Settings"
@@ -122,6 +225,13 @@ export default function RootLayout() {
             ),
           })}
         />
+        <RootStack.Screen
+          name="Editor"
+          component={EditorScreen}
+          options={{
+            headerShown: false,
+          }}
+        />
       </RootStack.Navigator>
       <StatusBar style={theme.dark ? 'light' : 'dark'} />
     </PaperProvider>

components/EditorMenu.tsx

@@ -0,0 +1,81 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import { View } from 'react-native';
+import { Divider } from 'react-native-paper';
+import { type Editor } from 'rn-text-editor';
+import MenuButton from './EditorMenuButton';
+interface EditorMenuProps {
+    editor: Editor;
+}
+const EditorMenu = ({ editor }: EditorMenuProps) => {
+    const [_, setForceUpdate] = useState(false);
+    useEffect(() => {
+        // force the ui to update when the editor updates
+        editor.on('update', () => {
+            setForceUpdate((prev) => !prev);
+        });
+    }, []);
+    const actions = [
+        {
+            icon: 'format-bold',
+            isActive: editor.isActive('bold'),
+            disabled: !editor.commandManager.createCan().toggleBold(),
+            onPress() {
+                if (editor.commandManager.createCan().toggleBold()) {
+                    editor.commandManager
+                        .createChain(undefined, true)
+                        .toggleBold()
+                        .run();
+                }
+            },
+        },
+        {
+            icon: 'format-italic',
+            isActive: editor.isActive('italic'),
+            disabled: !editor.commandManager.createCan().toggleItalic(),
+            onPress() {
+                if (editor.commandManager.createCan().toggleItalic()) {
+                    editor.commandManager
+                        .createChain(undefined, true)
+                        .toggleItalic()
+                        .run();
+                }
+            },
+        },
+        {
+            icon: 'format-color-highlight',
+            isActive: editor.isActive('highlight'),
+            disabled: !editor.commandManager.createCan().toggleHighlight(),
+            onPress() {
+                if (editor.commandManager.createCan().toggleHighlight()) {
+                    editor.commandManager
+                        .createChain(undefined, true)
+                        .toggleHighlight()
+                        .run();
+                }
+            },
+        },
+    ];
+
+    return (
+        <View style={{ flexDirection: 'row', justifyContent: "space-between" }}>
+            <View style={{ flexDirection: "row", justifyContent: "flex-start", alignItems: "center", flex: 1 }}>
+                {actions.map((action, index) => (
+                    <Fragment key={index}>
+                        <MenuButton
+                            key={action.icon}
+                            icon={action.icon}
+                            isActive={action.isActive}
+                            disabled={action.disabled}
+                            onPress={action.onPress}
+                        />
+                        {index < actions.length - 1 && (
+                            <Divider />
+                        )}
+                    </Fragment>
+                ))}
+            </View>
+        </View>
+    );
+};
+
+export default EditorMenu;

components/EditorMenuButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IconButton, type IconButtonProps } from 'react-native-paper';
+interface MenuButtonProps extends IconButtonProps {
+    isActive?: boolean;
+}
+const MenuButton = ({ isActive, ...props }: MenuButtonProps) => {
+    return (
+        <IconButton
+            size={18}
+            mode={isActive ? 'contained' : 'outlined'}
+            {...props}
+        />
+    );
+};
+
+export default MenuButton;

components/ThemedText.tsx

@@ -41,8 +41,8 @@ export function ThemedText({
 
 const styles = StyleSheet.create({
   default: {
-    fontSize: 16,
+    fontSize: 12,
-    lineHeight: 24,
+    lineHeight: 16,
   },
   defaultSemiBold: {
     fontSize: 16,

components/ui/Wrapper.tsx

@@ -0,0 +1,24 @@
+import { View } from "react-native";
+import { ThemedView } from "../ThemedView";
+import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTheme } from "react-native-paper";
+
+export default function Wrapper({ children }: { children: React.ReactNode }) {
+    const insets = useSafeAreaInsets();
+    const theme = useTheme();
+    return (
+        <ThemedView style={{ flex: 1 }}>
+            <View style={{
+                backgroundColor: theme.colors.primary,
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                right: 0,
+                height: insets.top,
+                zIndex: 1000,
+            }} />
+
+            {children}
+        </ThemedView >
+    );
+}

constants/Colors.ts

@@ -4,7 +4,7 @@ import { MD3LightTheme, MD3DarkTheme } from 'react-native-paper';
 const brandColors = {
   primary: '#35C4E5',
   primaryVariant: '#0051D5',
-  secondary: '#34C759',
+  secondary: '#278CA2',
   secondaryVariant: '#248A3D',
   background: '#F2F2F7',
   surface: '#FFFFFF',
@@ -22,7 +22,7 @@ export const lightTheme = {
     ...MD3LightTheme.colors,
     ...brandColors,
     // Additional custom colors
-    accent: '#5856D6',
+    accent: '#278CA2',
     warning: '#FF9500',
     success: '#34C759',
     info: '#007AFF',
@@ -49,7 +49,7 @@ export const darkTheme = {
     onSurface: '#FFFFFF',
     onError: '#000000',
     // Additional custom colors
-    accent: '#5E5CE6',
+    accent: '#278CA2',
     warning: '#FF9F0A',
     success: '#30D158',
     info: '#0A84FF',

hooks/useFilesystem.ts

@@ -0,0 +1,191 @@
+import { DATA_DIRECTORY_URI_KEY } from '@/constants/Settings';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { format } from 'date-fns';
+import * as FileSystem from 'expo-file-system';
+import { StorageAccessFramework } from 'expo-file-system';
+import { useCallback, useEffect, useState } from 'react';
+
+interface FileEntry {
+    name: string;
+    uri: string;
+    datetime: Date;
+    size: number;
+}
+interface PrettyNameOptions {
+    pathContext?: 'full' | 'short';
+}
+interface FileInfoWithSize {
+    uri: string;
+    exists: boolean;
+    isDirectory: boolean | null;
+    modificationTime: number | null;
+    size: number;
+}
+
+function datetimeFromFilename(filename: string): Date {
+    const match = filename.match(/(\d+)-(\d+)-(\d+)-(\d+)-(\d+)-(\d+)\.md$/);
+    if (match) {
+        const [_, year, month, day, hour, minute, second] = match;
+        return new Date(
+            parseInt(year),
+            parseInt(month) - 1,
+            parseInt(day),
+            parseInt(hour),
+            parseInt(minute),
+            parseInt(second)
+        );
+    }
+    return new Date();
+}
+
+export function prettyName(uri: string | null, options: PrettyNameOptions = {}) {
+    if (!uri) return null;
+    const { pathContext = 'short' } = options;
+
+    var returnString = "";
+    if (pathContext === 'full') {
+        returnString = "/";
+    }
+
+    const decodedUri = decodeURIComponent(uri);
+    const match = decodedUri.match(/.*\/primary:(.+)/);
+
+    if (match) {
+        if (pathContext === 'short') {
+            const filename = match[1].split('/').pop() || "Unknown";
+            returnString = returnString.concat(filename);
+        }
+        else {
+            returnString = returnString.concat(match[1]);
+        }
+    }
+    else {
+        // Fallback to your original logic
+        returnString = returnString.concat(uri.split('%3A').pop() || "Unknown");
+    }
+    return returnString;
+}
+
+export function useFileSystem() {
+    const [dataDirectoryUri, setDataDirectoryUri] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [files, setFiles] = useState<FileEntry[]>([]);
+    const [directorySize, setDirectorySize] = useState<number>(0);
+
+    // Load saved directory URI
+    useEffect(() => {
+        const loadDirectoryUri = async () => {
+            try {
+                const savedUri = await AsyncStorage.getItem(DATA_DIRECTORY_URI_KEY);
+                if (savedUri) {
+                    setDataDirectoryUri(savedUri);
+                }
+            } catch (error) {
+                console.error('Error loading directory URI:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        loadDirectoryUri();
+    }, []);
+
+    // Load files when directory changes
+    const loadFiles = useCallback(async () => {
+        if (!dataDirectoryUri) return;
+
+
+        try {
+            const dirContents = await StorageAccessFramework.readDirectoryAsync(dataDirectoryUri);
+            const markdownFiles = [];
+            let totalSize = 0;
+
+            for (const fileName of dirContents.filter(name => name.endsWith('.md'))) {
+                try {
+                    const fileInfo = await FileSystem.getInfoAsync(fileName) as FileInfoWithSize;
+                    const fileEntry = {
+                        name: prettyName(fileName) ?? "",
+                        uri: fileInfo.uri,
+                        datetime: datetimeFromFilename(fileName),
+                        size: fileInfo.size,
+                    };
+
+                    markdownFiles.push(fileEntry);
+                    totalSize += fileEntry.size;
+                } catch (error) {
+                    console.warn(`Error getting info for file ${fileName}:`, error);
+                }
+            }
+            markdownFiles.sort((a, b) => b.datetime.getTime() - a.datetime.getTime()); // Sort by datetime descending
+            setFiles(markdownFiles);
+            setDirectorySize(Math.round((totalSize / 1024 / 1024) * 1000) / 1000); // Convert to MB
+        } catch (error) {
+            console.error('Error loading files:', error);
+        }
+    }, [dataDirectoryUri]);
+
+    useEffect(() => {
+        loadFiles();
+    }, [loadFiles]);
+
+    const writeFile = useCallback(async (fileUriOrDatetime: string, content: string) => {
+        if (!dataDirectoryUri) throw new Error('No directory selected');
+        const fileUriDatetime = new Date(parseInt(fileUriOrDatetime) * 1000);
+        let fileUri = fileUriOrDatetime;
+        if (parseInt(fileUriOrDatetime)) { // If it's a datetime in seconds
+            const filename = format(fileUriDatetime, 'yyyy-MM-dd-HH-mm-ss');
+            fileUri = await StorageAccessFramework.createFileAsync(
+                dataDirectoryUri,
+                `${filename}.md`,
+                'text/markdown'
+            );
+        }
+        // const fileUri = `${dataDirectoryUri}/${filename}`;
+        await FileSystem.writeAsStringAsync(fileUri, content);
+        await loadFiles(); // Refresh file list
+    }, [dataDirectoryUri, loadFiles]);
+
+    const readFile = useCallback(async (filename: string): Promise<string> => {
+        if (!dataDirectoryUri) throw new Error('No directory selected');
+
+        const fileUri = `${dataDirectoryUri}/${filename}`;
+        return await FileSystem.readAsStringAsync(fileUri);
+    }, [dataDirectoryUri]);
+
+    const deleteFile = useCallback(async (filename: string): Promise<void> => {
+        return await FileSystem.deleteAsync(filename, { idempotent: true });
+    }
+        , []);
+
+    const saveDataDirectoryUri = useCallback(async (uri: string | null) => {
+        try {
+            if (uri) {
+                await AsyncStorage.setItem(DATA_DIRECTORY_URI_KEY, uri);
+            } else {
+                await AsyncStorage.removeItem(DATA_DIRECTORY_URI_KEY);
+            }
+            setDataDirectoryUri(uri);
+            // Refresh files when directory changes
+            if (uri) {
+                await loadFiles();
+            } else {
+                setFiles([]);
+            }
+        } catch (error) {
+            console.error('Error updating directory URI:', error);
+        }
+    }, [loadFiles]);
+
+    return {
+        dataDirectoryUri,
+        saveDataDirectoryUri,
+        isLoading,
+        files,
+        writeFile,
+        readFile,
+        deleteFile,
+        loadFiles,
+        hasDirectory: !!dataDirectoryUri,
+        directorySize,
+    };
+}

package.json

@@ -11,8 +11,10 @@
     "lint": "expo lint"
   },
   "dependencies": {
+    "@10play/tentap-editor": "0.7.0",
     "@expo/ngrok": "^4.1.3",
     "@expo/vector-icons": "^14.1.0",
+    "@react-native-async-storage/async-storage": "2.1.2",
     "@react-native-documents/picker": "^10.1.3",
     "@react-native-masked-view/masked-view": "0.3.2",
     "@react-native-vector-icons/material-design-icons": "^12.0.1",
@@ -20,43 +22,49 @@
     "@react-navigation/drawer": "^7.4.2",
     "@react-navigation/elements": "^2.3.8",
     "@react-navigation/native": "^7.1.6",
+    "@types/turndown": "^5.0.5",
+    "date-fns": "^4.1.0",
     "expo": "~53.0.11",
     "expo-blur": "~14.1.5",
     "expo-constants": "~17.1.6",
     "expo-dev-client": "~5.2.0",
+    "expo-file-system": "~18.1.10",
     "expo-font": "~13.3.1",
     "expo-haptics": "~14.1.4",
     "expo-image": "~2.3.0",
     "expo-linking": "~7.1.5",
+    "expo-navigation-bar": "~4.2.6",
     "expo-router": "~5.1.0",
     "expo-splash-screen": "~0.30.9",
     "expo-status-bar": "~2.2.3",
     "expo-symbols": "~0.4.5",
     "expo-system-ui": "~5.0.8",
     "expo-web-browser": "~14.1.6",
+    "marked": "^15.0.12",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-native": "0.79.3",
+    "react-native-edge-to-edge": "1.6.0",
     "react-native-gesture-handler": "~2.24.0",
+    "react-native-markdown-display": "^7.0.2",
     "react-native-paper": "^5.14.5",
+    "react-native-pell-rich-editor": "^1.9.0",
     "react-native-reanimated": "~3.17.4",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "~4.11.1",
     "react-native-vector-icons": "^10.2.0",
     "react-native-web": "~0.20.0",
     "react-native-webview": "13.13.5",
-    "expo-file-system": "~18.1.10",
+    "rn-text-editor": "^0.2.0",
-    "@react-native-async-storage/async-storage": "2.1.2",
+    "turndown-rn": "^6.1.0"
-    "expo-navigation-bar": "~4.2.6",
-    "react-native-edge-to-edge": "1.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
+    "@react-native-community/cli": "latest",
     "@types/react": "~19.0.10",
     "eslint": "^9.25.0",
     "eslint-config-expo": "~9.2.0",
-    "typescript": "~5.8.3",
+    "typescript": "~5.8.3"
-    "@react-native-community/cli": "latest"
   },
   "private": true
 }