better iterface

mobile/app/index.tsx

@@ -1,44 +1,65 @@
+import { useFocusEffect, useRouter } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
-import { useEffect, useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { pickDirectory } from '../services/safDirectory';
-import { saveDirectory, getFolders } from '../services/localStorage';
+import { useCallback, useState } from 'react';
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
 import { syncRoot } from '../features/syncDevice';
+import { pickDirectory } from '../services/safDirectory';
+import { getFolders, saveDirectory } from '../services/localStorage';
+import type { StoredFolder } from '../services/db/types';
 
 export default function Index() {
 
-  const [folders, setFolders] = useState<string[]>([]);
+  const router = useRouter();
+  const [roots, setRoots] = useState<StoredFolder[]>([]);
 
-  useEffect(() => {
-    (async () => {
-      const saved = await getFolders();
-      setFolders(saved.map((folder) => folder.name));
-    })();
+  const load = useCallback(async () => {
+    const saved = await getFolders();
+    setRoots(saved.filter((folder) => folder.parent_resource_id === null));
   }, []);
 
+  useFocusEffect(
+    useCallback(() => {
+      load();
+    }, [load])
+  );
+
   const handlePickDirectory = async () => {
     const folder = await pickDirectory();
     if ( !folder ) return;
     const saved = await saveDirectory(folder);
-    setFolders((prev) => [...prev, folder.name]);
     try {
       const result = await syncRoot(saved.resource_id);
       console.info('walk', JSON.stringify(result));
     } catch (error) {
       console.warn('walk failed', error);
     }
+    await load();
   };
 
   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" />
+      <Pressable style={styles.button} onPress={handlePickDirectory}>
+        <Text style={styles.buttonText}>Ajouter un dossier</Text>
+      </Pressable>
+      <FlatList
+        data={roots}
+        keyExtractor={(item) => item.resource_id}
+        renderItem={({ item }) => (
+          <Pressable
+            style={styles.row}
+            onPress={() => router.push(`/folder/${item.resource_id}`)}
+          >
+            <Text style={styles.rowTitle}>{item.name}</Text>
+            <Text style={styles.rowMeta}>{item.syncStatus}</Text>
+          </Pressable>
+        )}
+        ListEmptyComponent={
+          <Text style={styles.empty}>
+            Aucun dossier pour le moment. Appuie sur « Ajouter un dossier » pour synchroniser un dossier.
+          </Text>
+        }
+      />
     </View>
   );
 }
@@ -47,28 +68,37 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  title: {
-    fontSize: 32,
-    fontWeight: '600',
+    padding: 16,
   },
   button: {
-    marginTop: 24,
-    paddingHorizontal: 20,
+    backgroundColor: '#1a73e8',
     paddingVertical: 12,
-    backgroundColor: '#0057ff',
     borderRadius: 8,
+    alignItems: 'center',
+    marginBottom: 16,
   },
-  buttonLabel: {
+  buttonText: {
     color: '#fff',
     fontSize: 16,
     fontWeight: '600',
   },
-  folder: {
-    marginTop: 8,
-    fontSize: 14,
-    color: '#333',
+  row: {
+    paddingVertical: 14,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#ddd',
+  },
+  rowTitle: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  rowMeta: {
+    fontSize: 12,
+    color: '#888',
+    marginTop: 2,
+  },
+  empty: {
+    color: '#888',
+    textAlign: 'center',
+    marginTop: 24,
   },
 });