From 9bb3bb1163b13a9a2a363d5aa0b231b5ee8da97a Mon Sep 17 00:00:00 2001 From: Chris Sanden Date: Tue, 5 May 2026 17:36:34 +0200 Subject: [PATCH] polished and finalised onboarding flow --- app/(tabs)/_layout.tsx | 33 ++++++++++- app/(tabs)/index.tsx | 31 +++++++++- app/(tabs)/subjects.tsx | 31 +++++++++- app/login.tsx | 15 ++++- app/setup.tsx | 84 ++++++++++++--------------- app/task/timer.tsx | 14 ++++- app/task/upsertTask.tsx | 8 ++- lib/asyncStorage.ts | 10 ++++ lib/setupStatus.ts | 84 +++++++++++++++++++++++++++ notes/work-report-timer-2026-05-05.md | 57 +++++++++++++++++- 10 files changed, 310 insertions(+), 57 deletions(-) create mode 100644 lib/setupStatus.ts diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index c02acbd..a85f320 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -1,3 +1,4 @@ +import { getSetupStatus } from "@/lib/setupStatus"; import { supabase } from "@/lib/supabase"; import { Session } from "@supabase/supabase-js"; import * as Notifications from 'expo-notifications'; @@ -32,6 +33,8 @@ function UseNotificationObserver() { export default function TabLayout() { const [session, SetSession] = useState(null) const [loading, SetLoading] = useState(true); + const [setupChecked, setSetupChecked] = useState(false); + const [needsSetup, setNeedsSetup] = useState(false); UseNotificationObserver(); @@ -51,7 +54,29 @@ export default function TabLayout() { return () => sub.subscription.unsubscribe(); }, []); - if (loading) { + useEffect(() => { + const checkSetupStatus = async () => { + if (!session?.user.id) { + setNeedsSetup(false); + setSetupChecked(true); + return; + } + + try { + const setupStatus = await getSetupStatus(session.user.id); + setNeedsSetup(!setupStatus.isSetupComplete); + } catch { + setNeedsSetup(true); + } finally { + setSetupChecked(true); + } + }; + + setSetupChecked(false); + void checkSetupStatus(); + }, [session?.user.id]); + + if (loading || !setupChecked) { return null; } @@ -59,6 +84,10 @@ export default function TabLayout() { return ; } + if (needsSetup) { + return ; + } + return ( ); -} \ No newline at end of file +} diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index d33e90c..66b51e5 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -7,11 +7,12 @@ import { formatDate, formatDateTime } from '@/lib/date'; import { RegisterForLocalNotificationsAsync } from '@/lib/notifications'; import { CheckAssignmentCompletion } from '@/lib/progress'; import { DEFAULT_FOCUS_DURATION_MINUTES } from '@/lib/sessionDefaults'; +import { getSetupStatus } from '@/lib/setupStatus'; import { finalizeStoredSession } from '@/lib/sessionLifecycle'; import { supabase } from "@/lib/supabase"; import MaterialIcons from '@expo/vector-icons/MaterialIcons'; import { Session } from '@supabase/supabase-js'; -import { router, Stack, useFocusEffect } from "expo-router"; +import { Redirect, router, Stack, useFocusEffect } from "expo-router"; import { useCallback, useEffect, useState } from 'react'; import { Alert, @@ -164,6 +165,7 @@ export default function HomeScreen() { const [isFlowInfoVisible, setIsFlowInfoVisible] = useState(false); const [completingTaskId, setCompletingTaskId] = useState(null); const [subjectCount, setSubjectCount] = useState(0); + const [needsSetup, setNeedsSetup] = useState(null); const loadActiveSprint = useCallback(async () => { const storedSprint = await GetActiveSession(); @@ -479,6 +481,25 @@ export default function HomeScreen() { } }, [session]); + useEffect(() => { + const loadSetupGate = async () => { + if (!session?.user.id) { + setNeedsSetup(false); + return; + } + + try { + const setupStatus = await getSetupStatus(session.user.id); + setNeedsSetup(!setupStatus.isSetupComplete); + } catch { + setNeedsSetup(true); + } + }; + + setNeedsSetup(null); + void loadSetupGate(); + }, [session?.user.id]); + useFocusEffect( useCallback(() => { void loadActiveSprint(); @@ -611,6 +632,14 @@ export default function HomeScreen() { ); }, []); + if (session && needsSetup === null) { + return null; + } + + if (needsSetup) { + return ; + } + return ( ([]); const [session, SetSession] = useState(null); const [isFlowInfoVisible, setIsFlowInfoVisible] = useState(false); + const [needsSetup, setNeedsSetup] = useState(null); useEffect(() => { supabase.auth.getSession().then(({ data }) => { @@ -51,6 +53,25 @@ export default function Subjects() { return () => sub.subscription.unsubscribe(); }, []); + useEffect(() => { + const loadSetupGate = async () => { + if (!session?.user.id) { + setNeedsSetup(false); + return; + } + + try { + const setupStatus = await getSetupStatus(session.user.id); + setNeedsSetup(!setupStatus.isSetupComplete); + } catch { + setNeedsSetup(true); + } + }; + + setNeedsSetup(null); + void loadSetupGate(); + }, [session?.user.id]); + const GetSubjects = useCallback(async () => { if (!session?.user.id) return; @@ -76,6 +97,14 @@ export default function Subjects() { }, [GetSubjects, session]) ); + if (session && needsSetup === null) { + return null; + } + + if (needsSetup) { + return ; + } + return ( (() => { + const currentStep: SetupStepKey = (() => { if (!setupState.subjectId) { return 'subject'; } @@ -156,7 +134,7 @@ export default function SetupScreen() { } return 'sprint'; - }, [setupState]); + })(); const isSetupComplete = setupState.taskId !== null && setupState.completedFocusSessions > 0; @@ -223,14 +201,28 @@ export default function SetupScreen() { setActiveSession(null); } + const shouldUseDemoSprint = session?.user.id + ? !(await GetSetupSprintDemoUsed(session.user.id)) + : false; + + if (shouldUseDemoSprint && session?.user.id) { + await SaveSetupSprintDemoUsed(session.user.id); + } + router.push({ pathname: '/task/timer', - params: { - tId: setupState.taskId, - durationSeconds: '5', - }, + params: shouldUseDemoSprint + ? { + tId: setupState.taskId, + durationSeconds: '5', + onboardingDemo: 'true', + } + : { + tId: setupState.taskId, + durationMinutes: String(DEFAULT_FOCUS_DURATION_MINUTES), + }, }); - }, [currentStep, isSetupComplete, setupState]); + }, [currentStep, isSetupComplete, session?.user.id, setupState]); const primaryLabel = isSetupComplete ? 'Go to dashboard' diff --git a/app/task/timer.tsx b/app/task/timer.tsx index fb2012b..c7f4eb8 100644 --- a/app/task/timer.tsx +++ b/app/task/timer.tsx @@ -139,14 +139,16 @@ export default function TimerScreen() { const cancelHoldIdRef = React.useRef(0); const cancelHoldStartedAtRef = React.useRef(0); - const { tId, sessionType: sessionTypeParam, durationMinutes, durationSeconds, returnTaskId, chooseDuration } = useLocalSearchParams<{ + const { tId, sessionType: sessionTypeParam, durationMinutes, durationSeconds, returnTaskId, chooseDuration, onboardingDemo } = useLocalSearchParams<{ tId?: string; sessionType?: SessionType; durationMinutes?: string; durationSeconds?: string; returnTaskId?: string; chooseDuration?: string; + onboardingDemo?: string; }>(); + const isOnboardingDemo = onboardingDemo === 'true'; const timerOverlayHeight = Math.max(containerHeight, 1); const timerOverlayOffscreenY = timerOverlayHeight + 1000; const selectedSessionType: SessionType = sessionTypeParam ?? 'focus'; @@ -484,13 +486,18 @@ export default function TimerScreen() { setIsRunning(false); resetSessionValues(); + await finalizeSprintSession('completed', completedSession); + + if (isOnboardingDemo && completedSessionType === 'focus') { + router.replace('/'); + return; + } + setPostSessionPrompt({ completedSessionType, returnTaskId: completedReturnTaskId, nextBreakType, }); - - await finalizeSprintSession('completed', completedSession); })(); }); }); @@ -502,6 +509,7 @@ export default function TimerScreen() { currentSessionType, finalizeSprintSession, focusModeAnimation, + isOnboardingDemo, resetSessionValues, syncStudyCycleAfterCompletion, taskDetailsAnimation, diff --git a/app/task/upsertTask.tsx b/app/task/upsertTask.tsx index 07a552c..b155b53 100644 --- a/app/task/upsertTask.tsx +++ b/app/task/upsertTask.tsx @@ -1,4 +1,5 @@ import { defaultStyles } from '@/constants/defaultStyles'; +import { SaveSetupSprintDemoUsed } from '@/lib/asyncStorage'; import { CheckAssignmentCompletion } from '@/lib/progress'; import { supabase } from '@/lib/supabase'; import type { Task } from '@/lib/types'; @@ -125,9 +126,14 @@ export default function UpsertTask() { SetIsSaving(false); if (!isEditMode && isSetupFlow && result.data?.tId) { + await SaveSetupSprintDemoUsed(data.user.id); router.replace({ pathname: '/task/timer', - params: { tId: result.data.tId }, + params: { + tId: result.data.tId, + durationSeconds: '5', + onboardingDemo: 'true', + }, }); return; } diff --git a/lib/asyncStorage.ts b/lib/asyncStorage.ts index 9cc0eeb..e04a28e 100644 --- a/lib/asyncStorage.ts +++ b/lib/asyncStorage.ts @@ -2,6 +2,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage'; import type { SessionType } from '@/lib/types'; const notificationKey = (aId: string) => `assignment_notification_${aId}`; +const setupSprintDemoKey = (userId: string) => `setup_sprint_demo_${userId}`; const activeSprintKey = 'active_sprint'; const studyCycleKey = 'study_cycle'; @@ -68,3 +69,12 @@ export async function GetStudyCycle() { export async function RemoveStudyCycle() { await AsyncStorage.removeItem(studyCycleKey); } + +export async function GetSetupSprintDemoUsed(userId: string) { + const value = await AsyncStorage.getItem(setupSprintDemoKey(userId)); + return value === 'true'; +} + +export async function SaveSetupSprintDemoUsed(userId: string) { + await AsyncStorage.setItem(setupSprintDemoKey(userId), 'true'); +} diff --git a/lib/setupStatus.ts b/lib/setupStatus.ts new file mode 100644 index 0000000..f68e8e3 --- /dev/null +++ b/lib/setupStatus.ts @@ -0,0 +1,84 @@ +import { supabase } from '@/lib/supabase'; + +export type SetupStepKey = 'subject' | 'assignment' | 'task' | 'sprint'; + +export type SetupStatus = { + subjectId: string | null; + assignmentId: string | null; + taskId: string | null; + completedFocusSessions: number; + currentStep: SetupStepKey; + isSetupComplete: boolean; +}; + +export async function getSetupStatus(userId: string): Promise { + const [subjectResult, assignmentResult, taskResult, focusSessionResult] = await Promise.all([ + supabase + .from('subjects') + .select('sId') + .eq('uId', userId) + .order('lastChanged', { ascending: false }) + .limit(1) + .maybeSingle(), + supabase + .from('assignments') + .select('aId') + .eq('uId', userId) + .order('lastChanged', { ascending: false }) + .limit(1) + .maybeSingle(), + supabase + .from('tasks') + .select('tId') + .eq('uId', userId) + .order('lastChanged', { ascending: false }) + .limit(1) + .maybeSingle(), + supabase + .from('sprint_sessions') + .select('sessionId', { count: 'exact', head: true }) + .eq('userId', userId) + .eq('sessionType', 'focus') + .eq('status', 'completed'), + ]); + + if (subjectResult.error) { + throw subjectResult.error; + } + + if (assignmentResult.error) { + throw assignmentResult.error; + } + + if (taskResult.error) { + throw taskResult.error; + } + + if (focusSessionResult.error) { + throw focusSessionResult.error; + } + + const subjectId = subjectResult.data?.sId ?? null; + const assignmentId = assignmentResult.data?.aId ?? null; + const taskId = taskResult.data?.tId ?? null; + const completedFocusSessions = focusSessionResult.count ?? 0; + + let currentStep: SetupStepKey = 'sprint'; + + if (!subjectId) { + currentStep = 'subject'; + } else if (!assignmentId) { + currentStep = 'assignment'; + } else if (!taskId) { + currentStep = 'task'; + } + + return { + subjectId, + assignmentId, + taskId, + completedFocusSessions, + currentStep, + isSetupComplete: taskId !== null && completedFocusSessions > 0, + }; +} diff --git a/notes/work-report-timer-2026-05-05.md b/notes/work-report-timer-2026-05-05.md index 5737319..5987e27 100644 --- a/notes/work-report-timer-2026-05-05.md +++ b/notes/work-report-timer-2026-05-05.md @@ -9,6 +9,8 @@ After that, the scope shifted into reliability work because the remaining highes Later in the same work session, the focus narrowed again into wording and flow polish on the timer screen. The break and sprint descriptions were rewritten so they better reflect the app's goal of supporting structured study behavior, and two runtime regressions reported after testing were fixed in the timer flow itself. +After that, the work shifted into the remaining first-time-user gap from the vision plan. The login and tab flows were tightened so incomplete users are routed into guided setup automatically, and the first guided sprint was changed into a short onboarding demo instead of dropping a new user straight into a normal 25-minute timer. + --- ## #ImplementedFeatures @@ -111,6 +113,38 @@ The fixes were: --- +### #OnboardingRoutingGuard +Closed the remaining onboarding-routing gap so incomplete users are pushed into guided setup instead of being left in the dashboard tabs: +- added `lib/setupStatus.ts` +- moved the shared setup-completion rule into one place +- updated: + - `app/login.tsx` + - `app/(tabs)/_layout.tsx` + - `app/(tabs)/index.tsx` + - `app/(tabs)/subjects.tsx` +- setup completion is now checked from the same source in login, tab entry, dashboard, and subjects + +This made the setup flow enforceable instead of depending on the user noticing the guided-setup card in the dashboard. + +--- + +### #FirstSprintDemoFlow +Adjusted the first guided sprint so the first-time experience better matches the low-friction vision goal: +- extended `lib/asyncStorage.ts` +- added: + - `GetSetupSprintDemoUsed` + - `SaveSetupSprintDemoUsed` +- updated `app/task/upsertTask.tsx` and `app/setup.tsx` so the first setup sprint uses: + - `durationSeconds: '5'` + - `onboardingDemo: 'true'` +- updated `app/task/timer.tsx` so that onboarding-demo sprint completion: + - skips the normal session-complete modal + - routes directly to the dashboard + +This keeps the first sprint short enough to demonstrate the flow without locking a new user into a full focus block, while still falling back to the normal focus-session duration after the demo has been used once. + +--- + ## #ProblemsAndSetbacks ### #SessionTruthDivergence @@ -127,6 +161,13 @@ After the cycle and reliability changes landed, manual testing surfaced two smal These were not architectural problems, but they were both important because they affected the user's immediate understanding of the timer flow after interacting with it. +### #OnboardingFlowMismatch +Manual testing later uncovered a smaller flow mismatch inside guided setup: +- the first task created in setup could still open the timer with the normal 25-minute focus default +- returning to the guided-setup screen afterwards could then launch a different 5-second demo path + +The problem was that task creation in setup and the setup screen itself were using two different timer-entry paths. The fix was to make those paths share the same one-time onboarding-demo rule. + --- ## #CurrentState @@ -142,8 +183,11 @@ The app now supports: - more intentional sprint and break wording on the timer screen - preserved task-return context across long-break completion - corrected timer-screen recovery after cancelling a focus session +- automatic routing into guided setup for incomplete users after login and tab entry +- a one-time onboarding sprint demo that uses a 5-second timer +- direct dashboard routing after the onboarding demo completes, without the normal completion modal -At this point, the biggest remaining work in this area is no longer basic feature completion. It is verifying the edge cases that depend on real runtime behavior, such as backgrounding, reopen timing, and cross-screen recovery under actual app usage. +At this point, the timer/session work is closer to a finished loop, and the first-time-user path is more in line with the intended product vision. The biggest remaining work is now less about feature gaps and more about making sure the final report and final app behavior stay aligned. --- @@ -161,6 +205,12 @@ exited successfully npx tsc --noEmit exited successfully +npm run lint +exited successfully + +npx tsc --noEmit +exited successfully + npm run lint exited successfully ``` @@ -168,3 +218,8 @@ exited successfully Manual testing also confirmed most of the intended behavior from today's scope. Two regressions were found during that testing, both inside the timer flow, and both were fixed in the same work session: - blank sprint-duration state after cancelling a focus session - incorrect dashboard return after pressing `Continue with same task` following a long break + +Later manual testing also validated the guided-setup flow after the onboarding fixes: +- incomplete users were routed into guided setup instead of landing in dashboard tabs +- the first setup sprint used the intended 5-second demo timer +- after the demo finished, the user was sent directly to the dashboard without seeing the normal session-complete modal