feat: start oobe changes and update timeout ade

Author: hugofnm

src/app/_layout.tsx

@@ -35,14 +35,17 @@ export default function RootLayout() {
             <Stack screenOptions={{ headerShown: false, gestureEnabled: false }}>
               <Stack.Screen name="index" />
               <Stack.Screen name="splash" />
-              <Stack.Screen name="oobe" options={{ presentation: 'modal' }} />
+              <Stack.Screen name="oobe" />
               <Stack.Screen name="home" />
               <Stack.Screen name="show-edt" />
               <Stack.Screen
                 name="show-ent"
                 options={{ presentation: 'modal', gestureEnabled: true }}
               />
-              <Stack.Screen name="settings" />
+              <Stack.Screen
+                name="settings"
+                options={{ gestureEnabled: true }}
+              />
               <Stack.Screen
                 name="icon-config"
                 options={{ presentation: 'modal', gestureEnabled: true }}

src/app/edt-config.tsx

@@ -25,7 +25,7 @@ export default function EDTConfigScreen() {
   const router = useRouter();
   const theme = useChoosenTheme();
 
-  const { adeid, setAdeid } = useApp();
+  const { adeid, setAdeid, onboarding } = useApp();
   const [tempAde, setTempAde] = useState('');
 
   const [mode, setMode] = useState(adeid?.includes('-VET') ? '1' : '0');
@@ -91,7 +91,8 @@ export default function EDTConfigScreen() {
     setAdeid(newAdeid);
     saveSecure('adeid', newAdeid);
     haptics('heavy');
-    router.replace('/home');
+    if (onboarding) router.back();
+    else router.replace('/home');
   }
 
   return (

src/app/home.tsx

@@ -1,22 +1,10 @@
-import { APP_VERSION, RELEASE_NOTES } from '@/src/constants/config';
-import { useChoosenTheme } from '@/src/constants/theme';
-import { useApp } from '@/src/context/AppContext';
-import { edtService } from '@/src/services/edt';
-import type { NextEvent } from '@/src/types';
-import { handleURL } from '@/src/utils/api';
-import { haptics } from '@/src/utils/haptics';
-import { NextClassWidgetInstance } from '@/src/widgets/NextClassWidget';
-import BottomSheet, {
-  BottomSheetBackdrop,
-  BottomSheetBackdropProps,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
-import { useRouter } from 'expo-router';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
+
 import {
   ActivityIndicator,
   Avatar,
+  Badge,
   Button,
   Card,
   Chip,
@@ -26,8 +14,26 @@ import {
   Tooltip,
   TouchableRipple,
 } from 'react-native-paper';
+
+import { useRouter } from 'expo-router';
+
+import BottomSheet, {
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+  BottomSheetView,
+} from '@gorhom/bottom-sheet';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { saveAsync } from '../utils/storage';
+
+
+import { APP_VERSION, RELEASE_NOTES } from '@/src/constants/config';
+import { useChoosenTheme } from '@/src/constants/theme';
+import { useApp } from '@/src/context/AppContext';
+import { edtService } from '@/src/services/edt';
+import type { NextEvent } from '@/src/types';
+import { handleURL } from '@/src/utils/api';
+import { haptics } from '@/src/utils/haptics';
+import { NextClassWidgetInstance } from '@/src/widgets/NextClassWidget';
+import { getSecure, saveAsync } from '../utils/storage';
 
 const WELCOME_MESSAGES = [
   'Passe une excellente journée !',
@@ -46,19 +52,28 @@ function getRandomWelcomeMessage() {
 
 export default function HomeScreen() {
   const router = useRouter();
-  const { adeid, setCalendar, updateModalShown, setUpdateModalShown } = useApp();
+  const { 
+    adeid, setCalendar, setCalendarOffline, 
+    updateModalShown, setUpdateModalShown, 
+    setOnboarding 
+  } = useApp();
   const theme = useChoosenTheme();
   const insets = useSafeAreaInsets();
 
   const [loading, setLoading] = useState(false);
   const [selectable, setSelectable] = useState(true);
+
   const [nextEvent, setNextEvent] = useState<NextEvent>({
     summary: 'Chargement...',
     location: 'Chargement...',
   });
   const [nextEventLoaded, setNextEventLoaded] = useState(false);
+
   const [infoTitle, setInfoTitle] = useState('Informations');
   const [infoSubtitle, setInfoSubtitle] = useState('');
+
+  const isDemo = !adeid || adeid === 'demo';
+  
   const [welcomeMessage] = useState(getRandomWelcomeMessage);
 
   const bottomSheetInfoRef = useRef<BottomSheet>(null);
@@ -78,8 +93,13 @@ export default function HomeScreen() {
   );
 
   useEffect(() => {
+    setOnboarding(false);
+    if (!isDemo) {
     getNextEvent('normal');
     if (Platform.OS === 'ios') pushWidgetTimeline();
+    }
+
+    
 
     // check in app context if update modal has been shown, if not show it and set it to true
     if (!updateModalShown) {
@@ -98,6 +118,7 @@ export default function HomeScreen() {
   }
 
   async function getNextEvent(mode: 'normal' | 'force') {
+    if (isDemo) return;
     if (mode === 'force') {
       setNextEvent({ summary: 'Chargement...', location: 'Chargement...' });
     }
@@ -113,11 +134,14 @@ export default function HomeScreen() {
     setSelectable(false);
     setLoading(true);
 
-    const cal = await edtService.getEDT(adeid ?? 'demo');
-    setCalendar(cal);
+    const { events, offline } = await edtService.getEDT(adeid ?? 'demo');
+    setCalendar(events);
+    setCalendarOffline(offline);
     if (Platform.OS === 'ios') {
       try {
-        NextClassWidgetInstance.updateTimeline(edtService.buildWidgetTimeline(cal));
+        NextClassWidgetInstance.updateTimeline(
+          edtService.buildWidgetTimeline(events)
+        );
       } catch { }
     }
 
@@ -128,7 +152,7 @@ export default function HomeScreen() {
 
   async function pushWidgetTimeline() {
     try {
-      const events = await edtService.getEDT(adeid ?? 'demo');
+      const { events } = await edtService.getEDT(adeid ?? 'demo');
       const timeline = edtService.buildWidgetTimeline(events);
       NextClassWidgetInstance.updateTimeline(timeline);
     } catch {
@@ -180,17 +204,27 @@ export default function HomeScreen() {
           {welcomeMessage}
         </Text>
 
-        <Card style={{ marginBottom: 8 }} disabled={!selectable} onPress={getMyCal}>
-          <Card.Title title="Prochain Cours" />
+        <Card
+          style={{ marginBottom: 8 }}
+          disabled={!selectable}
+          onPress={isDemo ? () => router.push('/edt-config') : getMyCal}
+        >
+          <Card.Title title={isDemo ? 'Emploi du temps' : 'Prochain Cours'} />
           <Card.Content>
             <Text variant="titleLarge" numberOfLines={1}>
-              {nextEvent.summary}
+              {isDemo ? 'Non configuré' : nextEvent.summary}
             </Text>
             <Text variant="bodyMedium" numberOfLines={1}>
-              {nextEvent.location || "Salle non précisée"}
+              {isDemo ? "Appuyez pour choisir votre emploi du temps" : (nextEvent.location || "Salle non précisée")}
             </Text>
           </Card.Content>
           <Card.Actions>
+            {isDemo && (
+              <Chip disabled={!selectable} onPress={() => router.push('/edt-config')} icon="calendar-edit">
+                Configurer l&apos;EDT
+              </Chip>
+            )}
+            {!isDemo && (
             <Chip
               style={{ marginRight: 4 }}
               disabled={!selectable}
@@ -199,14 +233,17 @@ export default function HomeScreen() {
             >
               Rafraîchir
             </Chip>
-            {nextEvent.summary !== 'ADE Indisponible' ? (
+            )}
+            {!isDemo && (
+              nextEvent.summary !== 'ADE Indisponible' ? (
               <Chip disabled={!selectable} onPress={getMyCal} icon="calendar">
                 Emploi du temps
               </Chip>
             ) : (
               <Chip disabled={!selectable} onPress={getMyCal} icon="calendar-alert">
                 EDT (Hors-ligne)
               </Chip>
+              )
             )}
           </Card.Actions>
         </Card>
@@ -292,4 +329,4 @@ export default function HomeScreen() {
       </BottomSheet>
     </View>
   );
-}
+}

src/app/oobe.tsx

@@ -22,13 +22,19 @@ import { handleURL } from '@/src/utils/api';
 import { haptics } from '@/src/utils/haptics';
 import { saveSecure } from '@/src/utils/storage';
 
-type Step = 'welcome' | 'edt' | 'pronote';
+type Step = 'welcome' | 'edt';
 
 export default function OOBEScreen() {
   const router = useRouter();
-  const { setAdeid } = useApp();
+  const { adeid, setAdeid, setOnboarding, setOobeCompleted } = useApp();
   const theme = useChoosenTheme();
   const insets = useSafeAreaInsets();
+  const [step, setStep] = useState<Step>('welcome');
+  const edtDone = !!adeid && adeid !== 'demo';
+
+  useEffect(() => {
+    setOnboarding(true);
+  }, [setOnboarding]);
 
   const rotation = useSharedValue(0);
   const rotateConfig = { damping: 2, stiffness: 15 };
@@ -43,14 +49,30 @@ export default function OOBEScreen() {
 
   const renderNoBackdrop = useCallback(() => null, []);
 
-  async function handleStart() {
+  async function handleWelcomeNext() {
     haptics('medium');
+    // second passage (bouton "Relancer" des paramètres) : on n'écrase pas un EDT déjà configuré
+    if (!edtDone) {
     await saveSecure('adeid', 'demo');
     setAdeid('demo');
-    router.replace('/home');
+    }
+    setStep('edt');
+  }
+
+  function configureEdt() {
+    haptics('medium');
     router.push('/edt-config');
   }
 
+  function skipEdt() {
+    haptics('light');
+    setOobeCompleted(true);
+    setOnboarding(false);
+    router.replace('/home');
+  }
+
+  const GREEN = '#2E7D32';
+
   const bgStyle = { backgroundColor: theme.colors.background };
   const handleStyle = { backgroundColor: theme.colors.onBackground };
 
@@ -70,7 +92,11 @@ export default function OOBEScreen() {
 
       <View style={{ flex: 1, alignSelf: 'center', height: 'auto', marginTop: insets.top * 2 }}>
         <Animated.View style={animatedStyleLogo}>
-          <Image source={require('../assets/color.png')} style={{ width: 200, height: 200 }} />
+          <Image         source={
+          theme.dark
+            ? require('../assets/white.png')
+            : require('../assets/color.png')
+        } style={{ width: 200, height: 200 }} />
         </Animated.View>
       </View>
 
@@ -81,7 +107,9 @@ export default function OOBEScreen() {
         handleIndicatorStyle={handleStyle}
         backdropComponent={renderNoBackdrop}
       >
-        <BottomSheetView style={{ paddingLeft: 25, paddingRight: 25 }}>
+        <BottomSheetView style={{ paddingLeft: 25, paddingRight: 25, paddingBottom: insets.bottom }}>
+          {step === 'welcome' && (
+            <>
           <Text style={{ textAlign: 'left', marginBottom: 8, marginTop: 8 }} variant="displayMedium">
             UniceNotes
           </Text>
@@ -98,29 +126,62 @@ export default function OOBEScreen() {
           <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
             <Tooltip title="Mentions légales">
               <IconButton
-                style={{ marginBottom: 4 }}
                 icon="license"
                 mode="contained"
                 onPress={() => handleURL('https://notes.metrixmedia.fr/credits')}
               />
             </Tooltip>
             <Tooltip title="Code source">
               <IconButton
-                style={{ marginBottom: 16 }}
                 icon="source-branch"
                 mode="contained"
                 onPress={() => handleURL('https://github.com/UniceApps/UniceNotes')}
               />
             </Tooltip>
             <Tooltip title="Paramètres">
               <IconButton
-                style={{ marginBottom: insets.bottom }}
                 icon="cog"
                 mode="contained"
                 onPress={() => router.push('/settings')}
               />
             </Tooltip>
           </View>
+            </>
+          )}
+
+          {step === 'edt' && (
+            <>
+              <Text style={{ textAlign: 'left', marginBottom: 8, marginTop: 8 }} variant="displayMedium">
+                Configuration
+              </Text>
+              <Text style={{ textAlign: 'left', marginBottom: 16 }} variant="titleLarge">
+                &mdash; Emploi du temps
+              </Text>
+              <Text style={{ textAlign: 'left', marginBottom: 16 }} variant="titleMedium">
+                Configurez votre emploi du temps (via ADE) pour le retrouver directement à l&apos;accueil.
+              </Text>
+              {edtDone ? (
+                <Button
+                  style={{ marginBottom: 16 }}
+                  icon="check"
+                  mode="contained"
+                  buttonColor={GREEN}
+                  onPress={skipEdt}
+                >
+                  Suivant
+                </Button>
+              ) : (
+                <>
+                  <Button style={{ marginBottom: 8 }} icon="calendar-edit" mode="contained" onPress={configureEdt}>
+                    Configurer
+                  </Button>
+                  <Button style={{ marginBottom: 16 }} mode="outlined" onPress={skipEdt}>
+                    Plus tard
+                  </Button>
+                </>
+              )}
+            </>
+          )}
         </BottomSheetView>
       </BottomSheet>
     </View>