local storage add add folders

mobile/app/index.tsx

@@ -1,21 +1,29 @@
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 import { pickDirectory } from '../services/safDirectory';
-import { useEffect } from 'react';
 import { saveDirectory } from '../services/localStorage';
 
 export default function Index() {
 
-  useEffect(()=>{
-    pickDirectory().then((value) => {
-      if ( !value ) return;
-      saveDirectory(value)
-    })
-  },[])
+  const [folders, setFolders] = useState<string[]>([]);
+
+  const handlePickDirectory = async () => {
+    const folder = await pickDirectory();
+    if ( !folder ) return;
+    await saveDirectory(folder);
+    setFolders((prev) => [...prev, folder.name]);
+  };
 
   return (
     <View style={styles.container}>
       <Text style={styles.title}>Dot.</Text>
+      <Pressable style={styles.button} onPress={handlePickDirectory}>
+        <Text style={styles.buttonLabel}>Ajouter un dossier</Text>
+      </Pressable>
+      {folders.map((name) => (
+        <Text key={name} style={styles.folder}>{name}</Text>
+      ))}
       <StatusBar style="auto" />
     </View>
   );
@@ -32,4 +40,21 @@ const styles = StyleSheet.create({
     fontSize: 32,
     fontWeight: '600',
   },
+  button: {
+    marginTop: 24,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    backgroundColor: '#0057ff',
+    borderRadius: 8,
+  },
+  buttonLabel: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  folder: {
+    marginTop: 8,
+    fontSize: 14,
+    color: '#333',
+  },
 });