diff --git a/mobile/app/index.tsx b/mobile/app/index.tsx index 375d3f6..445530d 100644 --- a/mobile/app/index.tsx +++ b/mobile/app/index.tsx @@ -5,6 +5,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { MaterialIcons } from '@expo/vector-icons'; import { Gesture, GestureDetector } from 'react-native-gesture-handler'; +import { runOnJS } from 'react-native-reanimated'; import { useAddTags, useMoveResources, useFolders, useFiles, useFreeLocalSpace } from '../hooks/useFiles'; import { UnifiedFileItem, isFolder } from '../types'; import { SearchBar, SearchFilters, MediaFilter } from '../components/SearchBar'; @@ -198,14 +199,18 @@ export function HomeScreen() { return map; }, [sortedFiles]); + const handlePinchEnd = useCallback((scale: number) => { + if (scale > 1.2) { + setNumColumns(prev => Math.max(2, prev - 1)); + } else if (scale < 0.8) { + setNumColumns(prev => Math.min(6, prev + 1)); + } + }, []); + const pinchGesture = useMemo(() => Gesture.Pinch() .onEnd((event) => { - if (event.scale > 1.2) { - setNumColumns(prev => Math.max(2, prev - 1)); - } else if (event.scale < 0.8) { - setNumColumns(prev => Math.min(6, prev + 1)); - } + runOnJS(handlePinchEnd)(event.scale); }), [] ); @@ -466,6 +471,7 @@ export function HomeScreen() { item.id} numColumns={numColumns} diff --git a/mobile/app/onboarding.tsx b/mobile/app/onboarding.tsx index e45d3ac..2f1a294 100644 --- a/mobile/app/onboarding.tsx +++ b/mobile/app/onboarding.tsx @@ -4,64 +4,65 @@ import { Text, StyleSheet, TouchableOpacity, - Dimensions, - ActivityIndicator, + ScrollView, } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import { MaterialIcons } from '@expo/vector-icons'; -import { ONBOARDING_STEPS, CURRENT_ONBOARDING_VERSION, type OnboardingStep } from '../config/onboarding'; +import { ONBOARDING_STEPS, CURRENT_ONBOARDING_VERSION } from '../config/onboarding'; import { onboardingStorage } from '../services/onboardingStorage'; -import { scanSubdirectories } from '../hooks/useDeviceFiles'; -import { safDirectory } from '../services/safDirectory'; +import { safDirectory, StoredFolder } from '../services/safDirectory'; import * as FileSystem from 'expo-file-system/legacy'; -const { width: SCREEN_WIDTH } = Dimensions.get('window'); - -type ScanState = 'idle' | 'scanning' | 'done'; - -function stepIcon(step: OnboardingStep): keyof typeof MaterialIcons.glyphMap { - if (step.icon === 'waving-hand') return 'waving-hand'; - if (step.icon === 'create-new-folder') return 'create-new-folder'; - if (step.icon === 'check-circle') return 'check-circle'; - if (step.icon === 'folder-off') return 'folder-off'; - return 'info'; -} - -function ScanProgressView() { +function SelectFoldersStep({ + selectedFolders, + onAddFolder, + onRemoveFolder, +}: { + selectedFolders: StoredFolder[]; + onAddFolder: () => void; + onRemoveFolder: (folder: StoredFolder) => void; +}) { return ( - <> + - + - Scan en cours... + Ajoutez vos dossiers - Dot. explore les sous-dossiers de votre stockage. Cela peut prendre quelques secondes. + Sélectionnez les dossiers que vous souhaitez synchroniser avec Dot. - - ); -} -function ScanDoneView({ folderCount }: { folderCount: number }) { - return ( - <> - - - - Scan terminé ! - - {folderCount > 1 - ? `${folderCount} dossiers découverts et ajoutés à votre espace Dot.` - : '1 dossier ajouté à votre espace Dot.'} - - + {selectedFolders.length > 0 && ( + + {selectedFolders.map((f) => ( + + + + {f.name} + + onRemoveFolder(f)} + style={styles.removeBtn} + > + + + + ))} + + )} + + + + Ajouter un dossier + + ); } export function OnboardingScreen() { const navigation = useNavigation(); const [currentIndex, setCurrentIndex] = useState(0); - const [scanState, setScanState] = useState('idle'); - const [folderCount, setFolderCount] = useState(0); + const [selectedFolders, setSelectedFolders] = useState([]); const pendingSteps = onboardingStorage.getPendingSteps(); const step = pendingSteps[currentIndex]; @@ -71,44 +72,33 @@ export function OnboardingScreen() { navigation.reset({ index: 0, routes: [{ name: 'Home' as never }] }); }, [navigation]); - const handleRecursiveScan = useCallback(async () => { + const handlePickDirectory = useCallback(async () => { try { const result = await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync(); if (!result.granted) return; - const dirUri = result.directoryUri; const parts = dirUri.split('/'); - const dirName = decodeURIComponent(parts[parts.length - 1] ?? 'Stockage'); + const dirName = decodeURIComponent(parts[parts.length - 1] ?? 'Dossier'); - setScanState('scanning'); - - safDirectory.addFolder(dirUri, dirName); - - const subdirs = await scanSubdirectories(dirUri); - if (subdirs.length > 0) { - safDirectory.addBatchFolders( - subdirs.map((d) => ({ uri: d.uri, name: d.name, source: 'recursive', parentUri: d.parentUri })) - ); - } - - setFolderCount(1 + subdirs.length); - setScanState('done'); - - safDirectory.setDiscovered(); + const folder = safDirectory.addFolder(dirUri, dirName); + setSelectedFolders((prev) => [...prev, folder]); } catch (err) { - console.error('[Onboarding] recursive scan error:', err); - setScanState('idle'); + console.error('[Onboarding] pickDirectory error:', err); } }, []); + const handleRemoveFolder = useCallback((folder: StoredFolder) => { + safDirectory.removeFolder(folder.id); + setSelectedFolders((prev) => prev.filter((f) => f.id !== folder.id)); + }, []); + const handleNext = useCallback(async () => { if (!step) return; onboardingStorage.markStepSeen(step.id); if (currentIndex < pendingSteps.length - 1) { setCurrentIndex(currentIndex + 1); - setScanState('idle'); - setFolderCount(0); + setSelectedFolders([]); } else { complete(); } @@ -123,7 +113,7 @@ export function OnboardingScreen() { return null; } - const isScanStep = step.action?.type === 'recursive_scan'; + const isFolderStep = step.action?.type === 'pick_directory'; return ( @@ -133,28 +123,23 @@ export function OnboardingScreen() { - - {scanState === 'scanning' && isScanStep ? ( - - ) : scanState === 'done' && isScanStep ? ( - + + {isFolderStep ? ( + ) : ( - <> + - + {step.title} {step.description} - - {isScanStep && scanState === 'idle' && ( - - - {step.action?.label ?? 'Choisir un dossier'} - - )} - + )} - + @@ -166,21 +151,12 @@ export function OnboardingScreen() { ))} - {(!isScanStep || scanState === 'done') && ( - - - {currentIndex < pendingSteps.length - 1 ? 'Suivant' : 'Commencer'} - - - - )} - - {isScanStep && scanState === 'idle' && ( - - Passer cette étape - - - )} + + + {currentIndex < pendingSteps.length - 1 ? 'Suivant' : 'Commencer'} + + + ); @@ -200,12 +176,24 @@ const styles = StyleSheet.create({ fontSize: 16, color: '#999', }, - content: { + scrollContent: { + flex: 1, + }, + scrollInner: { + flexGrow: 1, + }, + welcomeContent: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 40, }, + folderStepContent: { + flex: 1, + alignItems: 'center', + paddingHorizontal: 40, + paddingTop: 40, + }, iconContainer: { width: 120, height: 120, @@ -227,16 +215,40 @@ const styles = StyleSheet.create({ color: '#666', textAlign: 'center', lineHeight: 24, + marginBottom: 20, + }, + folderList: { + width: '100%', + marginBottom: 16, + }, + selectedFolderRow: { + flexDirection: 'row', + alignItems: 'center', + backgroundColor: '#fafafa', + borderRadius: 10, + paddingHorizontal: 14, + paddingVertical: 12, + marginBottom: 8, + gap: 10, + }, + selectedFolderName: { + flex: 1, + fontSize: 15, + color: '#333', + }, + removeBtn: { + padding: 4, }, actionBtn: { flexDirection: 'row', alignItems: 'center', + justifyContent: 'center', backgroundColor: '#F57C00', borderRadius: 12, paddingHorizontal: 24, paddingVertical: 14, gap: 10, - marginTop: 32, + width: '100%', }, actionBtnText: { fontSize: 16, diff --git a/mobile/babel.config.js b/mobile/babel.config.js new file mode 100644 index 0000000..d872de3 --- /dev/null +++ b/mobile/babel.config.js @@ -0,0 +1,7 @@ +module.exports = function (api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + plugins: ['react-native-reanimated/plugin'], + }; +}; diff --git a/mobile/config/onboarding.ts b/mobile/config/onboarding.ts index fac753b..b1de0cf 100644 --- a/mobile/config/onboarding.ts +++ b/mobile/config/onboarding.ts @@ -1,7 +1,7 @@ -export const CURRENT_ONBOARDING_VERSION = 2; +export const CURRENT_ONBOARDING_VERSION = 3; export type OnboardingAction = { - type: 'pick_directory' | 'recursive_scan'; + type: 'pick_directory'; label: string; }; @@ -18,18 +18,17 @@ export type OnboardingStep = { export const ONBOARDING_STEPS: OnboardingStep[] = [ { id: 'welcome', - version: 2, + version: 3, title: 'Bienvenue sur Dot.', description: 'Votre espace document personnel, toujours accessible.', icon: 'waving-hand', }, { - id: 'pick_root_folder', - version: 2, - title: 'Choisissez votre dossier principal', - description: 'Sélectionnez la racine de votre stockage dans le sélecteur.\n\nDot. va scanner automatiquement tous les sous-dossiers (photos, téléchargements, documents…).', + id: 'select_folders', + version: 3, + title: 'Ajoutez vos dossiers', + description: 'Sélectionnez les dossiers que vous souhaitez synchroniser avec Dot.\n\nAjoutez-en autant que vous voulez, vous pourrez les gérer plus tard.', icon: 'create-new-folder', - action: { type: 'recursive_scan', label: 'Choisir le dossier principal' }, - condition: 'has_no_folders', + action: { type: 'pick_directory', label: 'Ajouter un dossier' }, }, ];