Chris/studysprint
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'some' changes

Browse Source
This commit is contained in:
Chris Sanden
2026-05-03 23:05:22 +02:00
parent 08a14b3ab2
commit 907fa18841
21 changed files with 2253 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

435
app/(tabs)/index.tsx
View File

@@ -1,9 +1,10 @@
import {
GetActiveSprint,
RemoveActiveSprint,
type ActiveSprint,
GetActiveSession,
RemoveActiveSession,
type ActiveSession,
} from '@/lib/asyncStorage';
import { formatDate } from '@/lib/date';
import type { SessionType } from '@/lib/types';
import { formatDate, formatDateTime } from '@/lib/date';
import { RegisterForLocalNotificationsAsync } from '@/lib/notifications';
import { CheckAssignmentCompletion } from '@/lib/progress';
import { supabase } from "@/lib/supabase";
@@ -30,6 +31,29 @@ type UpcomingDeadlineTask = {
deadline: string;
};
type DashboardProgressSummary = {
completedFocusSessionsToday: number;
minutesStudiedToday: number;
minutesStudiedThisWeek: number;
};
type RecentSession = {
sessionId: string;
taskTitle: string | null;
sessionType: SessionType;
elapsedSeconds: number;
status: string;
startedAt: string | null;
endedAt: string | null;
};
type RecentlyCompletedTask = {
tId: string;
title: string;
assignmentTitle: string;
lastChanged: string;
};
const FLOW_STEPS = [
{
label: '1',
@@ -60,18 +84,88 @@ function formatTime(totalSeconds: number) {
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
function getSessionLabel(sessionType: SessionType) {
switch (sessionType) {
case 'short_break':
return 'Short Break';
case 'long_break':
return 'Long Break';
default:
return 'Active Sprint';
}
}
function formatTrackedMinutes(totalSeconds: number) {
return Math.floor(totalSeconds / 60);
}
function formatTrackedDuration(totalSeconds: number) {
if (totalSeconds <= 0) {
return '0m';
}
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
if (hours === 0) {
return `${minutes}m`;
}
if (minutes === 0) {
return `${hours}h`;
}
return `${hours}h ${minutes}m`;
}
function getSessionStatusLabel(status: string) {
switch (status) {
case 'completed':
return 'Completed';
case 'cancelled':
return 'Cancelled';
case 'expired':
return 'Timed out';
default:
return status;
}
}
function getStartOfToday() {
const now = new Date();
return new Date(now.getFullYear(), now.getMonth(), now.getDate());
}
function getStartOfWeek() {
const today = getStartOfToday();
const currentDay = today.getDay();
const daysSinceMonday = (currentDay + 6) % 7;
const startOfWeek = new Date(today);
startOfWeek.setDate(today.getDate() - daysSinceMonday);
return startOfWeek;
}
export default function HomeScreen() {
const [session, SetSession] = useState<Session | null>(null);
const [activeSprint, setActiveSprint] = useState<ActiveSprint | null>(null);
const [activeSprint, setActiveSprint] = useState<ActiveSession | null>(null);
const [activeSprintTaskTitle, setActiveSprintTaskTitle] = useState<string | null>(null);
const [activeSprintTaskDesc, setActiveSprintTaskDesc] = useState<string | null>(null);
const [remainingSeconds, setRemainingSeconds] = useState(0);
const [dashboardSummary, setDashboardSummary] = useState<DashboardProgressSummary>({
completedFocusSessionsToday: 0,
minutesStudiedToday: 0,
minutesStudiedThisWeek: 0,
});
const [recentSessions, setRecentSessions] = useState<RecentSession[]>([]);
const [recentlyCompletedTasks, setRecentlyCompletedTasks] = useState<RecentlyCompletedTask[]>([]);
const [upcomingDeadlineTasks, setUpcomingDeadlineTasks] = useState<UpcomingDeadlineTask[]>([]);
const [isFlowInfoVisible, setIsFlowInfoVisible] = useState(false);
const [completingTaskId, setCompletingTaskId] = useState<string | null>(null);
const [subjectCount, setSubjectCount] = useState(0);
const loadActiveSprint = useCallback(async () => {
const storedSprint = await GetActiveSprint();
const storedSprint = await GetActiveSession();
if (!storedSprint) {
setActiveSprint(null);
@@ -87,7 +181,7 @@ export default function HomeScreen() {
);
if (secondsLeft <= 0) {
await RemoveActiveSprint();
await RemoveActiveSession();
setActiveSprint(null);
setActiveSprintTaskTitle(null);
setActiveSprintTaskDesc(null);
@@ -98,6 +192,12 @@ export default function HomeScreen() {
setActiveSprint(storedSprint);
setRemainingSeconds(secondsLeft);
if (!storedSprint.taskId) {
setActiveSprintTaskTitle(getSessionLabel(storedSprint.sessionType));
setActiveSprintTaskDesc('Take the break before you jump into the next focus session.');
return;
}
const { data: dbTitle } = await supabase
.from('tasks')
.select('title')
@@ -204,6 +304,160 @@ export default function HomeScreen() {
setUpcomingDeadlineTasks(enrichedTasks);
}, [session?.user.id]);
const loadDashboardProgress = useCallback(async () => {
if (!session?.user.id) {
setDashboardSummary({
completedFocusSessionsToday: 0,
minutesStudiedToday: 0,
minutesStudiedThisWeek: 0,
});
setRecentSessions([]);
setRecentlyCompletedTasks([]);
return;
}
const startOfToday = getStartOfToday().toISOString();
const startOfWeek = getStartOfWeek().toISOString();
const [
{ data: weeklySessions, error: weeklySessionsError },
{ data: rawRecentSessions, error: recentSessionsError },
{ data: completedTasks, error: completedTasksError },
{ count: fetchedSubjectCount, error: subjectCountError },
] = await Promise.all([
supabase
.from('sprint_sessions')
.select('sessionId, sessionType, elapsedSeconds, status, startedAt, endedAt')
.eq('userId', session.user.id)
.eq('sessionType', 'focus')
.not('endedAt', 'is', null)
.gte('endedAt', startOfWeek),
supabase
.from('sprint_sessions')
.select('sessionId, taskId, sessionType, elapsedSeconds, status, startedAt, endedAt')
.eq('userId', session.user.id)
.not('endedAt', 'is', null)
.order('endedAt', { ascending: false })
.limit(6),
supabase
.from('tasks')
.select('tId, title, aId, lastChanged')
.eq('uId', session.user.id)
.eq('isCompleted', true)
.order('lastChanged', { ascending: false })
.limit(3),
supabase
.from('subjects')
.select('sId', { count: 'exact', head: true })
.eq('uId', session.user.id),
]);
if (weeklySessionsError || recentSessionsError || completedTasksError || subjectCountError) {
setDashboardSummary({
completedFocusSessionsToday: 0,
minutesStudiedToday: 0,
minutesStudiedThisWeek: 0,
});
setRecentSessions([]);
setRecentlyCompletedTasks([]);
setSubjectCount(0);
return;
}
setSubjectCount(fetchedSubjectCount ?? 0);
const weeklySessionRows = weeklySessions ?? [];
const todaySummary = weeklySessionRows.reduce(
(summary, currentSession) => {
const endedAt = currentSession.endedAt ? new Date(currentSession.endedAt) : null;
if (!endedAt || Number.isNaN(endedAt.getTime())) {
return summary;
}
const elapsedSeconds = currentSession.elapsedSeconds ?? 0;
summary.minutesStudiedThisWeek += formatTrackedMinutes(elapsedSeconds);
if (endedAt >= new Date(startOfToday)) {
summary.minutesStudiedToday += formatTrackedMinutes(elapsedSeconds);
if (currentSession.status === 'completed') {
summary.completedFocusSessionsToday += 1;
}
}
return summary;
},
{
completedFocusSessionsToday: 0,
minutesStudiedToday: 0,
minutesStudiedThisWeek: 0,
} satisfies DashboardProgressSummary
);
setDashboardSummary(todaySummary);
const recentSessionRows = rawRecentSessions ?? [];
const recentTaskIds = [
...new Set(
recentSessionRows
.map((recentSession) => recentSession.taskId)
.filter((taskId): taskId is string => Boolean(taskId))
),
];
const completedTaskRows = completedTasks ?? [];
const completedAssignmentIds = [
...new Set(
completedTaskRows
.map((task) => task.aId)
.filter((assignmentId): assignmentId is string => Boolean(assignmentId))
),
];
const [{ data: recentTasks }, { data: completedAssignments }] = await Promise.all([
recentTaskIds.length > 0
? supabase
.from('tasks')
.select('tId, title')
.in('tId', recentTaskIds)
: Promise.resolve({ data: [], error: null }),
completedAssignmentIds.length > 0
? supabase
.from('assignments')
.select('aId, title')
.in('aId', completedAssignmentIds)
: Promise.resolve({ data: [], error: null }),
]);
const tasksById = new Map((recentTasks ?? []).map((task) => [task.tId, task.title]));
const assignmentsById = new Map(
(completedAssignments ?? []).map((assignment) => [assignment.aId, assignment.title])
);
setRecentSessions(
recentSessionRows.map((recentSession) => ({
sessionId: recentSession.sessionId,
taskTitle: recentSession.taskId ? (tasksById.get(recentSession.taskId) ?? null) : null,
sessionType: recentSession.sessionType,
elapsedSeconds: recentSession.elapsedSeconds ?? 0,
status: recentSession.status,
startedAt: recentSession.startedAt,
endedAt: recentSession.endedAt,
}))
);
setRecentlyCompletedTasks(
completedTaskRows.map((task) => ({
tId: task.tId,
title: task.title,
assignmentTitle: assignmentsById.get(task.aId) ?? 'Unknown Assignment',
lastChanged: task.lastChanged,
}))
);
}, [session?.user.id]);
useEffect(() => {
supabase.auth
.getSession()
@@ -227,8 +481,9 @@ export default function HomeScreen() {
useFocusEffect(
useCallback(() => {
void loadActiveSprint();
void loadDashboardProgress();
void loadUpcomingDeadlineTasks();
}, [loadActiveSprint, loadUpcomingDeadlineTasks])
}, [loadActiveSprint, loadDashboardProgress, loadUpcomingDeadlineTasks])
);
useEffect(() => {
@@ -245,9 +500,10 @@ export default function HomeScreen() {
setRemainingSeconds(secondsLeft);
if (secondsLeft <= 0) {
void RemoveActiveSprint();
void RemoveActiveSession();
setActiveSprint(null);
setActiveSprintTaskTitle(null);
setActiveSprintTaskDesc(null);
}
}, 1000);
@@ -324,7 +580,11 @@ export default function HomeScreen() {
}}
/>
<View className="m-1 flex-1 p-6">
<ScrollView
className="m-1 flex-1"
contentContainerStyle={{ padding: 24, paddingBottom: 40 }}
showsVerticalScrollIndicator={false}
>
<Modal
animationType="fade"
transparent
@@ -408,9 +668,35 @@ export default function HomeScreen() {
</View>
</Modal>
{subjectCount === 0 ? (
<View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
<Text className="text-xs font-bold uppercase tracking-[0.8px] text-text-muted">
First step
</Text>
<Text className="mt-2 text-2xl font-bold text-text-main">
Build your first study path
</Text>
<Text className="mt-2 text-sm leading-5 text-text-secondary">
Start with one subject, then add one assignment and one task so you
can reach your first sprint without guessing what to do next.
</Text>
<Pressable
className="mt-5 h-14 items-center justify-center rounded-2xl bg-accent"
onPress={() => router.push('/setup')}
>
<Text className="text-base font-bold text-text-inverse">
Start Guided Setup
</Text>
</Pressable>
</View>
) : null}
{activeSprint ? (
<View className="gap-2 rounded-2xl border border-[#D5D9DF] bg-[#F7F9FC] p-4">
<Text className="text-[13px] font-semibold text-[#5D6B7A]">Active Sprint</Text>
<Text className="text-[13px] font-semibold text-[#5D6B7A]">
{getSessionLabel(activeSprint.sessionType)}
</Text>
<Text className="text-[20px] font-bold text-[#1F2933]">
{activeSprintTaskTitle ?? 'Selected task'}
</Text>
@@ -428,11 +714,16 @@ export default function HomeScreen() {
onPress={() =>
router.push({
pathname: '/task/timer',
params: { tId: activeSprint.taskId },
params: activeSprint.taskId
? { tId: activeSprint.taskId }
: {
sessionType: activeSprint.sessionType,
durationMinutes: String(Math.max(1, Math.round(activeSprint.durationSeconds / 60))),
},
})
}
>
<Text className="text-[15px] font-bold text-white">Open Sprint</Text>
<Text className="text-[15px] font-bold text-white">Open Session</Text>
</Pressable>
</View>
) : (
@@ -441,10 +732,51 @@ export default function HomeScreen() {
</Text>
)}
<View className="mt-6 gap-3">
<Text className="text-lg font-bold text-[#1F2933]">
Study progress
</Text>
<Text className="text-sm leading-[20px] text-[#6B7580]">
A quick view of today&apos;s and this week&apos;s focused study effort.
</Text>
<View className="flex-row gap-3">
<View className="flex-1 rounded-2xl border border-[#D5D9DF] bg-white p-4">
<Text className="text-[12px] font-semibold uppercase tracking-[0.6px] text-[#7B8794]">
Focus sessions today
</Text>
<Text className="mt-2 text-[24px] font-extrabold text-[#1F2933]">
{dashboardSummary.completedFocusSessionsToday}
</Text>
</View>
<View className="flex-1 rounded-2xl border border-[#D5D9DF] bg-white p-4">
<Text className="text-[12px] font-semibold uppercase tracking-[0.6px] text-[#7B8794]">
Minutes today
</Text>
<Text className="mt-2 text-[24px] font-extrabold text-[#1F2933]">
{dashboardSummary.minutesStudiedToday}
</Text>
</View>
</View>
<View className="rounded-2xl border border-[#D5D9DF] bg-[#F7F9FC] p-4">
<Text className="text-[12px] font-semibold uppercase tracking-[0.6px] text-[#7B8794]">
Minutes this week
</Text>
<Text className="mt-2 text-[24px] font-extrabold text-[#1F2933]">
{dashboardSummary.minutesStudiedThisWeek}
</Text>
</View>
</View>
<View className="mt-6 gap-3">
<Text className="text-lg font-bold text-[#1F2933]">
Tasks with upcoming deadlines
</Text>
<Text className="text-sm leading-[20px] text-[#6B7580]">
The next concrete work items that are most likely to matter soon.
</Text>
{upcomingDeadlineTasks.length > 0 ? (
upcomingDeadlineTasks.map((task) => (
@@ -503,7 +835,82 @@ export default function HomeScreen() {
<Text className="text-sm text-[#7B8794]">No upcoming task deadlines.</Text>
)}
</View>
</View>
<View className="mt-6 gap-6 md:flex-row">
<View className="gap-3 md:flex-1">
<Text className="text-lg font-bold text-[#1F2933]">
Recent sessions
</Text>
<Text className="text-sm leading-[20px] text-[#6B7580]">
The latest recorded sprints and breaks.
</Text>
{recentSessions.length > 0 ? (
recentSessions.map((recentSession) => (
<View
key={recentSession.sessionId}
className="gap-[6px] rounded-2xl border border-[#D5D9DF] bg-white p-4"
>
<View className="flex-row items-start justify-between gap-3">
<View className="flex-1">
<Text className="text-base font-bold text-[#1F2933]">
{recentSession.taskTitle ?? getSessionLabel(recentSession.sessionType)}
</Text>
<Text className="mt-1 text-sm text-[#52606D]">
{getSessionLabel(recentSession.sessionType)} • {formatTrackedDuration(recentSession.elapsedSeconds)}
</Text>
</View>
<View className="rounded-full bg-[#EFF3F8] px-3 py-[6px]">
<Text className="text-[12px] font-bold text-[#52606D]">
{getSessionStatusLabel(recentSession.status)}
</Text>
</View>
</View>
<Text className="text-[13px] font-semibold text-[#7B8794]">
{formatDateTime(recentSession.endedAt ?? recentSession.startedAt)}
</Text>
</View>
))
) : (
<Text className="text-sm text-[#7B8794]">No recent sessions yet.</Text>
)}
</View>
<View className="gap-3 md:flex-1">
<Text className="text-lg font-bold text-[#1F2933]">
Recently completed tasks
</Text>
<Text className="text-sm leading-[20px] text-[#6B7580]">
Tasks you have recently finished and moved out of the queue.
</Text>
{recentlyCompletedTasks.length > 0 ? (
recentlyCompletedTasks.map((task) => (
<Pressable
key={task.tId}
className="gap-[6px] rounded-2xl border border-[#D5D9DF] bg-white p-4"
onPress={() =>
router.push({
pathname: '/task/viewDetailsTask',
params: { tId: task.tId },
})
}
>
<Text className="text-base font-bold text-[#1F2933]">{task.title}</Text>
<Text className="text-sm text-[#52606D]">{task.assignmentTitle}</Text>
<Text className="text-[13px] font-semibold text-[#7B8794]">
Completed {formatDateTime(task.lastChanged)}
</Text>
</Pressable>
))
) : (
<Text className="text-sm text-[#7B8794]">No completed tasks yet.</Text>
)}
</View>
</View>
</ScrollView>
</View>
);
}

42
app/(tabs)/subjects.tsx
View File

@@ -51,7 +51,7 @@ export default function Subjects() {
return () => sub.subscription.unsubscribe();
}, []);
const GetSubjects = async () => {
const GetSubjects = useCallback(async () => {
if (!session?.user.id) return;
const { data, error } = await supabase
@@ -66,14 +66,14 @@ export default function Subjects() {
}
SetSubjects((data as Subject[]) ?? []);
};
}, [session?.user.id]);
useFocusEffect(
useCallback(() => {
if (session) {
GetSubjects();
void GetSubjects();
}
}, [session])
}, [GetSubjects, session])
);
return (
@@ -212,12 +212,22 @@ export default function Subjects() {
{subjects.length === 0 ? (
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
<Text className="text-center text-base font-semibold text-text-secondary">
<Text className="text-center text-xl font-bold text-text-main">
No subjects yet
</Text>
<Text className="mt-1 text-center text-sm text-text-muted">
Create your first subject to get started.
<Text className="mt-2 text-center text-sm leading-5 text-text-secondary">
Start with one subject so the rest of your study path has a clear
place to live.
</Text>
<Pressable
className="mt-5 h-14 items-center justify-center rounded-2xl bg-accent"
onPress={() => router.push('/setup')}
>
<Text className="text-base font-bold text-text-inverse">
Start Guided Setup
</Text>
</Pressable>
</View>
) : (
<View>
@@ -292,14 +302,16 @@ export default function Subjects() {
</View>
)}
<Pressable
className="mt-2 h-14 items-center justify-center rounded-2xl bg-accent"
onPress={() => router.push('/subject/upsertSubject')}
>
<Text className="text-base font-bold text-text-inverse">
Create Subject
</Text>
</Pressable>
{subjects.length > 0 ? (
<Pressable
className="mt-2 h-14 items-center justify-center rounded-2xl bg-accent"
onPress={() => router.push('/subject/upsertSubject')}
>
<Text className="text-base font-bold text-text-inverse">
Create Subject
</Text>
</Pressable>
) : null}
</ScrollView>
</View>
);

5
app/_layout.tsx
View File

@@ -5,11 +5,12 @@ export default function RootLayout() {
return (
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="setup" options={{ headerShown: true }} />
<Stack.Screen name="subject" options={{ headerShown: false }} />
<Stack.Screen name="assignment" options={{ headerShown: false }} />
<Stack.Screen name="task" options={{ headerShown: false }} />
<Stack.Screen name="createUser" options={{ headerShown: false }} />
<Stack.Screen name="createUser" options={{ headerShown: true, title: "" }} />
<Stack.Screen name="login" options={{ headerShown: false }} />
</Stack>
);
}
}

29
app/assignment/upsertAssignment.tsx
View File

@@ -20,12 +20,14 @@ import {
} from 'react-native';
export default function UpsertAssignment() {
const { aId, sId: routeSId } = useLocalSearchParams<{
const { aId, sId: routeSId, flow } = useLocalSearchParams<{
aId?: string;
sId?: string;
flow?: string;
}>();
const isEditMode = Boolean(aId);
const isSetupFlow = flow === 'setup';
const [title, SetTitle] = useState('');
const [description, SetDescription] = useState('');
@@ -195,6 +197,17 @@ export default function UpsertAssignment() {
SetIsSaving(false);
if (!isEditMode && isSetupFlow) {
router.replace({
pathname: '/task/upsertTask',
params: {
aId: savedAssignment.aId,
flow: 'setup',
},
});
return;
}
Alert.alert(
isEditMode
? 'Assignment successfully updated!'
@@ -258,7 +271,9 @@ export default function UpsertAssignment() {
<Text className={labelClassName}>Title</Text>
<TextInput
className={inputClassName}
placeholder="Enter assignment title"
placeholder={
isSetupFlow ? 'e.g. Weekly problem set 3' : 'Enter assignment title'
}
placeholderTextColor="#9CA3AF"
value={title}
onChangeText={SetTitle}
@@ -270,7 +285,11 @@ export default function UpsertAssignment() {
<Text className={labelClassName}>Description</Text>
<TextInput
className={`${inputClassName} min-h-28`}
placeholder="Add a short description"
placeholder={
isSetupFlow
? 'e.g. Finish the next exercise set before Friday'
: 'Add a short description'
}
placeholderTextColor="#9CA3AF"
value={description}
onChangeText={SetDescription}
@@ -283,7 +302,7 @@ export default function UpsertAssignment() {
<Text className={labelClassName}>Deadline</Text>
<TextInput
className={inputClassName}
placeholder="YYYY-MM-DD"
placeholder={isSetupFlow ? 'e.g. 2026-05-14' : 'YYYY-MM-DD'}
placeholderTextColor="#9CA3AF"
value={deadline}
onChangeText={SetDeadline}
@@ -361,4 +380,4 @@ export default function UpsertAssignment() {
</KeyboardAvoidingView>
</>
);
}
}

10
app/assignment/viewDetailsAssignment.tsx
View File

@@ -295,7 +295,7 @@ export default function ViewDetailsAssignment() {
<View className="mt-5">
<View className="mb-2 flex-row items-center justify-between">
<Text className="text-sm font-semibold text-text-secondary">
Task Progress
Tasks completed
</Text>
<Text className="text-sm font-bold text-text-main">
@@ -318,6 +318,10 @@ export default function ViewDetailsAssignment() {
? 'All tasks complete'
: `${remainingTasks} task${remainingTasks === 1 ? '' : 's'} remaining`}
</Text>
<Text className="mt-1 text-xs text-text-muted">
Based only on completed tasks in this assignment.
</Text>
</View>
<Text className="mt-4 text-sm text-text-muted">
@@ -463,7 +467,9 @@ export default function ViewDetailsAssignment() {
{section.emptyMessage}
</Text>
<Text className="mt-1 text-center text-sm text-text-muted">
Tasks for this assignment will show up here.
{tasks.length === 0
? 'Create the first task so this assignment turns into one clear next action.'
: 'Tasks for this assignment will show up here.'}
</Text>
</View>
) : (

207
app/createUser.tsx
View File

@@ -1,10 +1,12 @@
import { supabase } from '@/lib/supabase';
import { router } from 'expo-router';
import { useState } from 'react';
import { useEffect, useRef, useState } from 'react';
import {
Alert,
Animated,
Keyboard,
KeyboardAvoidingView,
KeyboardEvent,
Platform,
Pressable,
ScrollView,
@@ -18,6 +20,48 @@ export default function CreateUser() {
const [email, SetEmail] = useState('');
const [password, SetPassword] = useState('');
const [isLoading, SetIsLoading] = useState(false);
const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
const scrollViewRef = useRef<ScrollView>(null);
const cardLift = useRef(new Animated.Value(0)).current;
useEffect(() => {
const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
const handleKeyboardShow = (event: KeyboardEvent) => {
setIsKeyboardVisible(true);
const keyboardHeight = event.endCoordinates.height;
const liftAmount = Math.min(
Platform.OS === 'ios' ? keyboardHeight * 0.5 : keyboardHeight * 0.6,
260
);
Animated.timing(cardLift, {
toValue: -liftAmount,
duration: event.duration ?? 220,
useNativeDriver: true,
}).start();
};
const handleKeyboardHide = () => {
setIsKeyboardVisible(false);
Animated.timing(cardLift, {
toValue: 0,
duration: 220,
useNativeDriver: true,
}).start();
};
const showSubscription = Keyboard.addListener(showEvent, handleKeyboardShow);
const hideSubscription = Keyboard.addListener(hideEvent, handleKeyboardHide);
return () => {
showSubscription.remove();
hideSubscription.remove();
};
}, [cardLift]);
const SignUp = async () => {
if (email.trim() === '' || password.trim() === '') {
@@ -47,7 +91,7 @@ export default function CreateUser() {
router.replace('/login');
return;
}
router.replace('/');
router.replace('/setup');
};
const inputClassName =
@@ -57,90 +101,113 @@ export default function CreateUser() {
<KeyboardAvoidingView
className="flex-1 bg-app-bg"
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 24}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<ScrollView
ref={scrollViewRef}
className="flex-1"
keyboardShouldPersistTaps="handled"
keyboardDismissMode="on-drag"
automaticallyAdjustKeyboardInsets={Platform.OS === 'ios'}
contentContainerStyle={{
flexGrow: 1,
justifyContent: 'center',
justifyContent: isKeyboardVisible ? 'flex-start' : 'center',
paddingHorizontal: 20,
paddingTop: 64,
paddingBottom: 32,
paddingTop: isKeyboardVisible ? 24 : 64,
paddingBottom: isKeyboardVisible ? 96 : 32,
}}
>
<View className="mb-10">
<Text className="mt-5 text-4xl font-bold text-text-main">
Study Sprint
</Text>
<Text className="mt-3 text-base leading-6 text-text-secondary">
Organize subjects, assignments, and tasks in one calm workflow.
</Text>
</View>
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
<Text className="text-2xl font-bold text-text-main">
Create account
</Text>
<Text className="mt-2 text-sm leading-5 text-text-secondary">
Start your next study sprint.
</Text>
<View className="mt-6 mb-5">
<Text className="mb-2 text-sm font-semibold text-text-secondary">
Email
<Animated.View style={{ transform: [{ translateY: cardLift }] }}>
<View className="mb-10">
<Text className="mt-5 text-4xl font-bold text-text-main">
Study Sprint
</Text>
<Text className="mt-3 text-base leading-6 text-text-secondary">
Organize subjects, assignments, and tasks in one calm workflow.
</Text>
<TextInput
className={inputClassName}
placeholder="you@example.com"
placeholderTextColor="#9CA3AF"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
value={email}
onChangeText={SetEmail}
/>
</View>
<View className="mb-6">
<Text className="mb-2 text-sm font-semibold text-text-secondary">
Password
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
<Text className="text-2xl font-bold text-text-main">
Create account
</Text>
<TextInput
className={inputClassName}
placeholder="Create a password"
placeholderTextColor="#9CA3AF"
secureTextEntry
value={password}
onChangeText={SetPassword}
/>
<Text className="mt-2 text-sm leading-5 text-text-secondary">
Start your next study sprint.
</Text>
<View className="mt-5 rounded-2xl border border-app-border bg-app-subtle p-4">
<Text className="text-sm font-bold text-text-main">
What this app does
</Text>
<Text className="mt-1 text-sm leading-5 text-text-secondary">
Study Sprint helps you move from subject to assignment to task,
then into a focused sprint.
</Text>
<Text className="mt-3 text-sm font-bold text-text-main">
Why an account exists
</Text>
<Text className="mt-1 text-sm leading-5 text-text-secondary">
Your account keeps that structure and your tracked study
progress attached to you.
</Text>
</View>
<View className="mt-6 mb-5">
<Text className="mb-2 text-sm font-semibold text-text-secondary">
Email
</Text>
<TextInput
className={inputClassName}
placeholder="you@example.com"
placeholderTextColor="#9CA3AF"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
value={email}
onChangeText={SetEmail}
/>
</View>
<View className="mb-6">
<Text className="mb-2 text-sm font-semibold text-text-secondary">
Password
</Text>
<TextInput
className={inputClassName}
placeholder="Create a password so your progress follows you"
placeholderTextColor="#9CA3AF"
secureTextEntry
value={password}
onChangeText={SetPassword}
/>
</View>
<Pressable
className={`h-14 items-center justify-center rounded-2xl ${
isLoading ? 'bg-accent-disabled' : 'bg-accent'
}`}
onPress={SignUp}
disabled={isLoading}
>
<Text className="text-base font-bold text-text-inverse">
{isLoading ? 'Creating account...' : 'Create account'}
</Text>
</Pressable>
<Pressable
className="mt-4 h-12 items-center justify-center rounded-2xl border border-app-border bg-app-subtle"
onPress={() => router.push('/login')}
>
<Text className="text-sm font-semibold text-text-secondary">
Already have an account? Log in
</Text>
</Pressable>
</View>
<Pressable
className={`h-14 items-center justify-center rounded-2xl ${
isLoading ? 'bg-accent-disabled' : 'bg-accent'
}`}
onPress={SignUp}
disabled={isLoading}
>
<Text className="text-base font-bold text-text-inverse">
{isLoading ? 'Creating account...' : 'Create account'}
</Text>
</Pressable>
<Pressable
className="mt-4 h-12 items-center justify-center rounded-2xl border border-app-border bg-app-subtle"
onPress={() => router.push('/login')}
>
<Text className="text-sm font-semibold text-text-secondary">
Already have an account? Log in
</Text>
</Pressable>
</View>
</Animated.View>
</ScrollView>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
}
}

62
app/login.tsx
View File

@@ -1,12 +1,45 @@
import { supabase } from "@/lib/supabase";
import { router } from "expo-router";
import { useState } from "react";
import { Alert, Keyboard, KeyboardAvoidingView, Platform, Pressable, ScrollView, Text, TextInput, TouchableWithoutFeedback, View } from "react-native";
import { useEffect, useRef, useState } from "react";
import { Alert, Keyboard, KeyboardAvoidingView, KeyboardEvent, Platform, Pressable, ScrollView, Text, TextInput, TouchableWithoutFeedback, View } from "react-native";
export default function Login() {
const [email, SetEmail] = useState('');
const [password, SetPassword] = useState('');
const [isLoading, SetIsLoading] = useState(false);
const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
const scrollViewRef = useRef<ScrollView>(null);
useEffect(() => {
const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
const handleKeyboardShow = (event: KeyboardEvent) => {
setIsKeyboardVisible(true);
const keyboardHeight = event.endCoordinates.height;
const offsetBaseline = Platform.OS === 'ios' ? 180 : 140;
const nextScrollOffset = Math.max(0, keyboardHeight - offsetBaseline);
scrollViewRef.current?.scrollTo({
y: nextScrollOffset,
animated: true,
});
};
const handleKeyboardHide = () => {
setIsKeyboardVisible(false);
scrollViewRef.current?.scrollTo({ y: 0, animated: true });
};
const showSubscription = Keyboard.addListener(showEvent, handleKeyboardShow);
const hideSubscription = Keyboard.addListener(hideEvent, handleKeyboardHide);
return () => {
showSubscription.remove();
hideSubscription.remove();
};
}, []);
const login = async () => {
if(email.trim() === '' || password.trim() === '') {
@@ -38,17 +71,21 @@ export default function Login() {
<KeyboardAvoidingView
className="flex-1 bg-app-bg"
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : 24}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<ScrollView
ref={scrollViewRef}
className="flex-1"
keyboardShouldPersistTaps="handled"
keyboardDismissMode="on-drag"
automaticallyAdjustKeyboardInsets={Platform.OS === 'ios'}
contentContainerStyle={{
flexGrow: 1,
justifyContent: 'center',
justifyContent: isKeyboardVisible ? 'flex-start' : 'center',
paddingHorizontal: 20,
paddingTop: 64,
paddingBottom: 32,
paddingTop: isKeyboardVisible ? 24 : 64,
paddingBottom: isKeyboardVisible ? 96 : 32,
}}
>
<View className="mb-10">
@@ -70,6 +107,16 @@ export default function Login() {
Continue your study workflow.
</Text>
<View className="mt-5 rounded-2xl border border-app-border bg-app-subtle p-4">
<Text className="text-sm font-bold text-text-main">
Your study path stays with your account
</Text>
<Text className="mt-1 text-sm leading-5 text-text-secondary">
Subjects, assignments, tasks, and tracked sprint progress follow
you after you sign in.
</Text>
</View>
<View className="mb-5 mt-6">
<Text className="mb-2 text-sm font-semibold text-text-secondary">
Email
@@ -97,6 +144,9 @@ export default function Login() {
secureTextEntry
value={password}
onChangeText={SetPassword}
onFocus={() => {
scrollViewRef.current?.scrollToEnd({ animated: true });
}}
/>
</View>
@@ -125,4 +175,4 @@ export default function Login() {
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
}
}

356
app/setup.tsx Normal file
View File

@@ -0,0 +1,356 @@
import { GetActiveSession, RemoveActiveSession, type ActiveSession } from '@/lib/asyncStorage';
import { supabase } from '@/lib/supabase';
import { Session } from '@supabase/supabase-js';
import { Redirect, Stack, router, useFocusEffect, useLocalSearchParams } from 'expo-router';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Pressable, ScrollView, Text, View } from 'react-native';
type SetupState = {
subjectId: string | null;
assignmentId: string | null;
taskId: string | null;
completedFocusSessions: number;
};
const SETUP_STEPS = [
{
key: 'subject',
title: 'Create your first subject',
description:
'Start with one course or study area so the rest of the structure has a clear home.',
},
{
key: 'assignment',
title: 'Create your first assignment',
description:
'Add one project, exercise set, or exam-prep block inside that subject.',
},
{
key: 'task',
title: 'Create your first task',
description:
'Break the assignment into one concrete thing you can actually sit down and do.',
},
{
key: 'sprint',
title: 'Start your first sprint',
description:
'Begin one focused study session so the app immediately turns into action instead of setup.',
},
] as const;
type SetupStepKey = (typeof SETUP_STEPS)[number]['key'];
export default function SetupScreen() {
const {
subjectId: subjectIdParam,
assignmentId: assignmentIdParam,
taskId: taskIdParam,
} = useLocalSearchParams<{
subjectId?: string;
assignmentId?: string;
taskId?: string;
}>();
const [session, setSession] = useState<Session | null>(null);
const [isAuthLoading, setIsAuthLoading] = useState(true);
const [setupState, setSetupState] = useState<SetupState>({
subjectId: subjectIdParam ?? null,
assignmentId: assignmentIdParam ?? null,
taskId: taskIdParam ?? null,
completedFocusSessions: 0,
});
const [activeSession, setActiveSession] = useState<ActiveSession | null>(null);
useEffect(() => {
supabase.auth.getSession().then(({ data }) => {
setSession(data.session ?? null);
setIsAuthLoading(false);
});
const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
setSession(newSession);
setIsAuthLoading(false);
});
return () => sub.subscription.unsubscribe();
}, []);
const loadSetupState = useCallback(async () => {
if (!session?.user.id) {
setSetupState({
subjectId: null,
assignmentId: null,
taskId: null,
completedFocusSessions: 0,
});
setActiveSession(null);
return;
}
const [storedActiveSession, subjectResult, assignmentResult, taskResult, focusSessionResult] =
await Promise.all([
GetActiveSession(),
supabase
.from('subjects')
.select('sId')
.eq('uId', session.user.id)
.order('lastChanged', { ascending: false })
.limit(1)
.maybeSingle(),
supabase
.from('assignments')
.select('aId')
.eq('uId', session.user.id)
.order('lastChanged', { ascending: false })
.limit(1)
.maybeSingle(),
supabase
.from('tasks')
.select('tId')
.eq('uId', session.user.id)
.order('lastChanged', { ascending: false })
.limit(1)
.maybeSingle(),
supabase
.from('sprint_sessions')
.select('sessionId', { count: 'exact', head: true })
.eq('userId', session.user.id)
.eq('sessionType', 'focus')
.eq('status', 'completed'),
]);
if (storedActiveSession && storedActiveSession.endTime <= Date.now()) {
await RemoveActiveSession();
setActiveSession(null);
} else {
setActiveSession(storedActiveSession);
}
setSetupState({
subjectId: subjectIdParam ?? subjectResult.data?.sId ?? null,
assignmentId: assignmentIdParam ?? assignmentResult.data?.aId ?? null,
taskId: taskIdParam ?? taskResult.data?.tId ?? null,
completedFocusSessions: focusSessionResult.count ?? 0,
});
}, [assignmentIdParam, session?.user.id, subjectIdParam, taskIdParam]);
useFocusEffect(
useCallback(() => {
void loadSetupState();
}, [loadSetupState])
);
const currentStep = useMemo<SetupStepKey>(() => {
if (!setupState.subjectId) {
return 'subject';
}
if (!setupState.assignmentId) {
return 'assignment';
}
if (!setupState.taskId) {
return 'task';
}
return 'sprint';
}, [setupState]);
const isSetupComplete =
setupState.taskId !== null && setupState.completedFocusSessions > 0;
const handlePrimaryAction = useCallback(async () => {
if (isSetupComplete) {
router.replace('/');
return;
}
if (currentStep === 'subject') {
router.push({
pathname: '/subject/upsertSubject',
params: { flow: 'setup' },
});
return;
}
if (currentStep === 'assignment' && setupState.subjectId) {
router.push({
pathname: '/assignment/upsertAssignment',
params: {
sId: setupState.subjectId,
flow: 'setup',
},
});
return;
}
if (currentStep === 'task' && setupState.assignmentId) {
router.push({
pathname: '/task/upsertTask',
params: {
aId: setupState.assignmentId,
flow: 'setup',
},
});
return;
}
if (!setupState.taskId) {
return;
}
const freshActiveSession = await GetActiveSession();
if (freshActiveSession && freshActiveSession.endTime > Date.now()) {
router.push({
pathname: '/task/timer',
params: freshActiveSession.taskId
? { tId: freshActiveSession.taskId }
: {
sessionType: freshActiveSession.sessionType,
durationMinutes: String(
Math.max(1, Math.round(freshActiveSession.durationSeconds / 60))
),
},
});
return;
}
if (freshActiveSession) {
await RemoveActiveSession();
setActiveSession(null);
}
router.push({
pathname: '/task/timer',
params: {
tId: setupState.taskId,
durationSeconds: '5',
},
});
}, [currentStep, isSetupComplete, setupState]);
const primaryLabel = isSetupComplete
? 'Go to dashboard'
: currentStep === 'subject'
? 'Create first subject'
: currentStep === 'assignment'
? 'Create first assignment'
: currentStep === 'task'
? 'Create first task'
: activeSession
? 'Open active sprint'
: 'Start first sprint';
if (isAuthLoading) {
return null;
}
if (!session) {
return <Redirect href="/login" />;
}
return (
<View className="flex-1 bg-app-bg">
<Stack.Screen
options={{
title: 'Guided Setup',
headerTitleAlign: 'center',
}}
/>
<ScrollView
className="flex-1"
contentContainerStyle={{
paddingHorizontal: 20,
paddingTop: 20,
paddingBottom: 32,
}}
showsVerticalScrollIndicator={false}
>
<View className="rounded-3xl border border-app-border bg-app-surface p-5">
<Text className="text-xs font-bold uppercase tracking-[0.8px] text-text-muted">
First-time setup
</Text>
<Text className="mt-2 text-3xl font-bold text-text-main">
Build one simple study path
</Text>
<Text className="mt-3 text-base leading-6 text-text-secondary">
You only need one subject, one assignment, one task, and one sprint to
make the app useful.
</Text>
</View>
<View className="mt-6 gap-3">
{SETUP_STEPS.map((step, index) => {
const isDone =
step.key === 'subject'
? Boolean(setupState.subjectId)
: step.key === 'assignment'
? Boolean(setupState.assignmentId)
: step.key === 'task'
? Boolean(setupState.taskId)
: isSetupComplete;
const isCurrent = !isDone && currentStep === step.key;
return (
<View
key={step.key}
className={`rounded-3xl border p-4 ${
isCurrent
? 'border-accent bg-accent-soft'
: 'border-app-border bg-app-surface'
}`}
>
<View className="flex-row items-start">
<View
className={`mr-3 h-8 w-8 items-center justify-center rounded-full ${
isDone ? 'bg-accent' : isCurrent ? 'bg-text-main' : 'bg-app-subtle'
}`}
>
<Text
className={`text-sm font-bold ${
isDone || isCurrent ? 'text-text-inverse' : 'text-text-secondary'
}`}
>
{isDone ? '✓' : index + 1}
</Text>
</View>
<View className="flex-1">
<Text className="text-lg font-bold text-text-main">
{step.title}
</Text>
<Text className="mt-1 text-sm leading-5 text-text-secondary">
{step.description}
</Text>
</View>
</View>
</View>
);
})}
</View>
<View className="mt-6 rounded-3xl border border-app-border bg-app-surface p-5">
<Text className="text-sm font-semibold text-text-secondary">
{isSetupComplete
? 'You have already completed at least one focus sprint.'
: currentStep === 'sprint'
? 'The structure is ready. The next step is to actually begin a sprint.'
: 'Follow the next step below. The rest of the app will make more sense once that path exists.'}
</Text>
<Pressable
className="mt-5 h-14 items-center justify-center rounded-2xl bg-accent"
onPress={handlePrimaryAction}
>
<Text className="text-base font-bold text-text-inverse">
{primaryLabel}
</Text>
</Pressable>
</View>
</ScrollView>
</View>
);
}

24
app/subject/upsertSubject.tsx
View File

@@ -20,8 +20,9 @@ import {
export default function UpsertSubject() {
const { sId } = useLocalSearchParams<{ sId?: string }>();
const { sId, flow } = useLocalSearchParams<{ sId?: string; flow?: string }>();
const isEditMode = Boolean(sId);
const isSetupFlow = flow === 'setup';
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
@@ -88,7 +89,7 @@ export default function UpsertSubject() {
const result = isEditMode && sId
? await supabase.from('subjects').update(payload).eq('sId', sId)
: await supabase.from('subjects').insert(payload);
: await supabase.from('subjects').insert(payload).select().single();
setIsSaving(false);
@@ -101,6 +102,17 @@ export default function UpsertSubject() {
return;
}
if (!isEditMode && isSetupFlow && result.data?.sId) {
router.replace({
pathname: '/assignment/upsertAssignment',
params: {
sId: result.data.sId,
flow: 'setup',
},
});
return;
}
Alert.alert(
isEditMode ? 'Subject updated successfully!' : 'Subject created successfully!'
);
@@ -154,7 +166,7 @@ export default function UpsertSubject() {
</Text>
<Text className="mt-2 text-base leading-6 text-text-secondary">
{isEditMode? ' Update this subject and keep your study structure organized.'
: 'Add a subject to organize your assignments and studyt tasks.'}
: 'Add a subject to organize your assignments and study tasks.'}
</Text>
</View>
@@ -162,7 +174,7 @@ export default function UpsertSubject() {
<View className="mb-5">
<Text className={labelClassName}>Title</Text>
<TextInput className={inputClassName}
placeholder="Enter subject title"
placeholder={isSetupFlow ? 'e.g. Algorithms' : 'Enter subject title'}
placeholderTextColor="#9CA3AF"
value={title}
onChangeText={setTitle}
@@ -174,7 +186,7 @@ export default function UpsertSubject() {
<Text className={labelClassName}>Description</Text>
<TextInput
className={`${inputClassName} min-h-28`}
placeholder="Add a short description"
placeholder={isSetupFlow ? 'e.g. Lectures, problem sets, and exam prep' : 'Add a short description'}
placeholderTextColor="#9CA3AF"
value={description}
onChangeText={setDescription}
@@ -349,4 +361,4 @@ export default function UpsertSubject() {
</KeyboardAvoidingView>
</>
);
}
}

10
app/subject/viewDetailsSubject.tsx
View File

@@ -288,7 +288,7 @@ export default function ViewDetailsSubject() {
<View className="mt-5">
<View className="mb-2 flex-row items-center justify-between">
<Text className="text-sm font-semibold text-text-secondary">
Assignment Progress
Assignments completed
</Text>
<Text className="text-sm font-bold text-text-main">
@@ -313,6 +313,10 @@ export default function ViewDetailsSubject() {
remainingAssignments === 1 ? '' : 's'
} remaining`}
</Text>
<Text className="mt-1 text-xs text-text-muted">
Based only on completed assignments in this subject.
</Text>
</View>
<Text className="mt-4 text-sm text-text-muted">
@@ -451,7 +455,9 @@ export default function ViewDetailsSubject() {
{section.emptyMessage}
</Text>
<Text className="mt-1 text-center text-sm text-text-muted">
Assignments for this subject will show up here.
{assignments.length === 0
? 'Create the first assignment to give this subject a real study path.'
: 'Assignments for this subject will show up here.'}
</Text>
</View>
) : (

408
app/task/timer.tsx
View File

@@ -1,12 +1,12 @@
import {
GetActiveSprint,
RemoveActiveSprint,
SaveActiveSprint,
GetActiveSession,
RemoveActiveSession,
SaveActiveSession,
} from '@/lib/asyncStorage';
import { supabase } from '@/lib/supabase';
import type { Task } from '@/lib/types';
import type { SessionType, Task } from '@/lib/types';
import * as Haptics from 'expo-haptics';
import { Stack, useLocalSearchParams } from 'expo-router';
import { router, Stack, useLocalSearchParams } from 'expo-router';
import * as React from 'react';
import {
Alert,
@@ -48,6 +48,12 @@ const HOLD_TO_CANCEL_MS = 2000;
const CANCEL_ANIMATION_DELAY_MS = 250;
const BUTTON_PRESS_IN_MS = 80;
const BUTTON_PRESS_OUT_MS = 140;
const SHORT_BREAK_DURATION_MINUTES = 5;
type PostSessionPrompt = {
completedSessionType: SessionType;
returnTaskId: string | null;
};
function formatTime(totalSeconds: number) {
const minutes = Math.floor(totalSeconds / 60);
@@ -69,6 +75,23 @@ function getSessionId(sessionData: unknown) {
return maybeSession.sessionId ?? maybeSession.sessionid ?? null;
}
function getSessionLabel(sessionType: SessionType) {
switch (sessionType) {
case 'short_break':
return 'Short Break';
case 'long_break':
return 'Long Break';
default:
return 'Sprint';
}
}
type StartSessionInput = {
sessionType: SessionType;
taskId: string | null;
durationSeconds: number;
};
export default function TimerScreen() {
const [containerHeight, setContainerHeight] = React.useState(0);
const [duration, setDuration] = React.useState(TIMER_OPTIONS[0]);
@@ -76,6 +99,8 @@ export default function TimerScreen() {
const [timerOverlayVisible, setTimerOverlayVisible] = React.useState(false);
const [timeRemaining, setTimeRemaining] = React.useState(0);
const [task, setTask] = React.useState<Task | null>(null);
const [currentSessionType, setCurrentSessionType] = React.useState<SessionType>('focus');
const [postSessionPrompt, setPostSessionPrompt] = React.useState<PostSessionPrompt | null>(null);
const scrollX = React.useRef(new Animated.Value(0)).current;
const timerAnimation = React.useRef(new Animated.Value(0)).current;
@@ -100,9 +125,44 @@ export default function TimerScreen() {
const cancelHoldIdRef = React.useRef(0);
const cancelHoldStartedAtRef = React.useRef(0);
const { tId } = useLocalSearchParams<{ tId?: string}>();
const { tId, sessionType: sessionTypeParam, durationMinutes, durationSeconds, returnTaskId } = useLocalSearchParams<{
tId?: string;
sessionType?: SessionType;
durationMinutes?: string;
durationSeconds?: string;
returnTaskId?: string;
}>();
const timerOverlayHeight = Math.max(containerHeight, 1);
const timerOverlayOffscreenY = timerOverlayHeight + 1000;
const selectedSessionType: SessionType = sessionTypeParam ?? 'focus';
const showDurationPicker =
selectedSessionType === 'focus' && durationMinutes == null && durationSeconds == null;
const selectedDurationMinutes = React.useMemo(() => {
if (!durationMinutes) {
return null;
}
const parsedDuration = Number(durationMinutes);
if (!Number.isFinite(parsedDuration) || parsedDuration <= 0) {
return null;
}
return parsedDuration;
}, [durationMinutes]);
const selectedDurationSeconds = React.useMemo(() => {
if (!durationSeconds) {
return null;
}
const parsedDuration = Number(durationSeconds);
if (!Number.isFinite(parsedDuration) || parsedDuration <= 0) {
return null;
}
return parsedDuration;
}, [durationSeconds]);
React.useEffect(() => {
if (containerHeight > 0 && !timerIsRunning) {
@@ -190,16 +250,16 @@ export default function TimerScreen() {
});
const finalizeSprintSession = React.useCallback(async (finalStatus: 'completed' | 'cancelled' | 'expired') => {
const activeSprint = await GetActiveSprint();
const activeSession = await GetActiveSession();
if (!activeSprint) {
if (!activeSession) {
return;
}
await RemoveActiveSprint();
await RemoveActiveSession();
const { error } = await supabase.rpc('finalize_sprint_session', {
p_session_id: activeSprint.sessionId,
p_session_id: activeSession.sessionId,
p_final_status: finalStatus,
p_ended_at: new Date().toISOString(),
});
@@ -271,11 +331,16 @@ export default function TimerScreen() {
cancelOverlayAnimation.setValue(0);
setTimerOverlayVisible(false);
setTimeRemaining(0);
setCurrentSessionType(selectedSessionType);
setIsRunning(false);
}, [cancelOverlayAnimation, timerAnimation, timerOverlayOffscreenY]);
}, [cancelOverlayAnimation, selectedSessionType, timerAnimation, timerOverlayOffscreenY]);
const finishTimer = React.useCallback(() => {
clearCountdownInterval();
const completedSessionType = currentSessionType;
const completedReturnTaskId =
completedSessionType === 'focus' ? (tId ?? null) : (returnTaskId ?? null);
void finalizeSprintSession('completed');
Animated.parallel([
@@ -308,12 +373,11 @@ export default function TimerScreen() {
}),
]).start(() => {
setIsRunning(false);
/* TODO
Implement store and send of ellapsed time value in seconds to DB
for total time spent statistic
*/
resetSessionValues();
setPostSessionPrompt({
completedSessionType,
returnTaskId: completedReturnTaskId,
});
});
});
}, [
@@ -321,10 +385,13 @@ export default function TimerScreen() {
cancelButtonAnimation,
clearCountdownInterval,
countdownAnimation,
currentSessionType,
finalizeSprintSession,
focusModeAnimation,
resetSessionValues,
taskDetailsAnimation,
returnTaskId,
tId,
]);
// This picks up the timer overlay animation from the current Y position and
@@ -416,31 +483,40 @@ export default function TimerScreen() {
);
React.useEffect(() => {
if (!tId || timerIsRunning || containerHeight === 0) {
if (timerIsRunning || containerHeight === 0) {
return;
}
const restoreSprint = async () => {
const activeSprint = await GetActiveSprint();
const activeSession = await GetActiveSession();
if (!activeSprint || activeSprint.taskId !== tId) {
if (!activeSession) {
return;
}
const remainingMs = activeSprint.endTime - Date.now();
if (activeSession.sessionType === 'focus' && activeSession.taskId !== tId) {
return;
}
if (activeSession.sessionType !== 'focus' && selectedSessionType !== activeSession.sessionType) {
return;
}
const remainingMs = activeSession.endTime - Date.now();
if (remainingMs <= 0) {
await finalizeSprintSession('expired');
return;
}
const totalMs = activeSprint.durationSeconds * 1000;
const totalMs = activeSession.durationSeconds * 1000;
const elapsedMs = totalMs - remainingMs;
const elapsedRatio = Math.max(0, Math.min(elapsedMs / totalMs, 1));
const restoredY = timerOverlayHeight * elapsedRatio;
setIsRunning(true);
setTimerOverlayVisible(true);
setCurrentSessionType(activeSession.sessionType);
sessionStartedAtRef.current = Date.now() - elapsedMs;
sessionDurationMsRef.current = totalMs;
@@ -451,7 +527,7 @@ export default function TimerScreen() {
taskDetailsAnimation.setValue(1);
cancelOverlayAnimation.setValue(0);
startCountdown(activeSprint.endTime);
startCountdown(activeSession.endTime);
startProgressAnimation(restoredY);
};
@@ -467,29 +543,39 @@ export default function TimerScreen() {
startCountdown,
startProgressAnimation,
taskDetailsAnimation,
selectedSessionType,
tId,
timerOverlayHeight,
timerIsRunning,
]);
const startTimerSession = React.useCallback(async () => {
if (!tId || timerIsRunning || containerHeight === 0) {
const startSession = React.useCallback(async ({
sessionType,
taskId,
durationSeconds,
}: StartSessionInput) => {
if (timerIsRunning || containerHeight === 0) {
return;
}
const totalSeconds = duration * TIMER_UNIT_IN_SECONDS;
const endTime = Date.now() + totalSeconds * 1000;
if (sessionType === 'focus' && !taskId) {
Alert.alert('Could not start session', 'Focus sessions must be linked to a task.');
return;
}
const endTime = Date.now() + durationSeconds * 1000;
const { data: userData, error: userError } = await supabase.auth.getUser();
if (userError || !userData.user?.id) {
Alert.alert('Could not start sprint', 'Missing signed-in user for sprint session.');
Alert.alert('Could not start session', 'Missing signed-in user.');
return;
}
const { data: sessionData, error: sessionError } = await supabase.rpc('start_sprint_session', {
p_task_id: tId,
p_task_id: taskId,
p_user_id: userData.user.id,
p_planned_duration: totalSeconds,
p_session_type: sessionType,
p_planned_duration: durationSeconds,
p_started_at: new Date().toISOString(),
});
@@ -497,8 +583,8 @@ export default function TimerScreen() {
if (sessionError || !sessionId) {
Alert.alert(
'Could not start sprint',
sessionError?.message ?? 'Sprint session could not be created.'
'Could not start session',
sessionError?.message ?? 'Session could not be created.'
);
return;
}
@@ -506,18 +592,20 @@ export default function TimerScreen() {
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
setIsRunning(true);
setTimerOverlayVisible(true);
setCurrentSessionType(sessionType);
taskDetailsAnimation.setValue(0);
countdownAnimation.setValue(0);
cancelOverlayAnimation.setValue(0);
sessionStartedAtRef.current = Date.now();
sessionDurationMsRef.current = totalSeconds * 1000;
sessionDurationMsRef.current = durationSeconds * 1000;
void SaveActiveSprint({
void SaveActiveSession({
sessionId,
taskId: tId,
durationSeconds: totalSeconds,
sessionType,
taskId,
durationSeconds,
endTime,
});
@@ -531,10 +619,54 @@ export default function TimerScreen() {
runStartSequence,
startCountdown,
taskDetailsAnimation,
tId,
timerIsRunning,
]);
const startTimerSession = React.useCallback(async () => {
if (selectedSessionType === 'focus' && !tId) {
return;
}
const totalSeconds =
selectedDurationSeconds ?? (selectedDurationMinutes ?? duration) * TIMER_UNIT_IN_SECONDS;
await startSession({
sessionType: selectedSessionType,
taskId: selectedSessionType === 'focus' ? (tId ?? null) : null,
durationSeconds: totalSeconds,
});
}, [duration, selectedDurationMinutes, selectedDurationSeconds, selectedSessionType, startSession, tId]);
const handleStartShortBreak = React.useCallback(() => {
setPostSessionPrompt(null);
router.replace({
pathname: '/task/timer',
params: {
sessionType: 'short_break',
durationMinutes: String(SHORT_BREAK_DURATION_MINUTES),
returnTaskId: tId ?? undefined,
},
});
}, [tId]);
const handleContinueSameTask = React.useCallback(() => {
if (!postSessionPrompt?.returnTaskId) {
router.replace('/');
return;
}
setPostSessionPrompt(null);
router.replace({
pathname: '/task/timer',
params: { tId: postSessionPrompt.returnTaskId },
});
}, [postSessionPrompt]);
const handleBackToDashboard = React.useCallback(() => {
setPostSessionPrompt(null);
router.replace('/');
}, []);
const cancelTimer = React.useCallback(() => {
if (!timerIsRunning) {
return;
@@ -745,7 +877,7 @@ export default function TimerScreen() {
<Stack.Screen
options={{
title: timerIsRunning ? '' : 'Sprint duration',
title: timerIsRunning ? '' : `${getSessionLabel(selectedSessionType)} duration`,
headerTransparent: true,
headerTintColor: colors.text,
headerTitleAlign: 'center',
@@ -790,7 +922,9 @@ export default function TimerScreen() {
]}
>
<Text className="text-text-main text-xl">Start</Text>
<Text className="text-text-main text-xl">Sprint</Text>
{selectedSessionType === 'focus' ? (
<Text className="text-text-main text-xl">Sprint</Text>
) : null}
</Animated.View>
</TouchableOpacity>
</Animated.View>
@@ -814,7 +948,7 @@ export default function TimerScreen() {
},
]}
>
<Text className="text-text-main text-xl">Hold to end sprint</Text>
<Text className="text-text-main text-xl">Hold to end session</Text>
</Animated.View>
</TouchableOpacity>
</Animated.View>
@@ -836,32 +970,45 @@ export default function TimerScreen() {
<Text style={styles.countdownText}>{formatTime(timeRemaining)}</Text>
</Animated.View>
<View
style={[
styles.timerPickerWrapper,
{
top: containerHeight / 3,
},
]}
>
<Animated.FlatList
data={TIMER_OPTIONS}
scrollEnabled={!timerIsRunning}
keyExtractor={(item) => item.toString()}
horizontal
bounces={false}
onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
useNativeDriver: true,
})}
showsHorizontalScrollIndicator={false}
onMomentumScrollEnd={handleTimerPickerMomentumEnd}
snapToInterval={ITEM_SIZE}
decelerationRate="fast"
style={styles.timerPickerList}
contentContainerStyle={styles.timerPickerContent}
renderItem={renderTimerItem}
/>
</View>
{!timerIsRunning && showDurationPicker ? (
<View
style={[
styles.timerPickerWrapper,
{
top: containerHeight / 3,
},
]}
>
<Animated.FlatList
data={TIMER_OPTIONS}
scrollEnabled={!timerIsRunning}
keyExtractor={(item) => item.toString()}
horizontal
bounces={false}
onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }], {
useNativeDriver: true,
})}
showsHorizontalScrollIndicator={false}
onMomentumScrollEnd={handleTimerPickerMomentumEnd}
snapToInterval={ITEM_SIZE}
decelerationRate="fast"
style={styles.timerPickerList}
contentContainerStyle={styles.timerPickerContent}
renderItem={renderTimerItem}
/>
</View>
) : !timerIsRunning ? (
<View style={styles.fixedDurationBlock}>
<Text style={styles.fixedDurationLabel}>
{selectedDurationSeconds != null
? `${selectedDurationSeconds} sec`
: `${selectedDurationMinutes ?? SHORT_BREAK_DURATION_MINUTES} min`}
</Text>
<Text style={styles.fixedDurationDescription}>
This session uses a fixed duration so you can move straight into the next step.
</Text>
</View>
) : null}
<Animated.View
pointerEvents="none"
@@ -873,9 +1020,53 @@ export default function TimerScreen() {
},
]}
>
<Text style={styles.taskName}>{task?.title ?? 'Sprint'}</Text>
<Text style={styles.taskDescription}>{task?.description || 'Focus on this task until the timer ends.'}</Text>
<Text style={styles.taskName}>
{currentSessionType === 'focus' ? task?.title ?? 'Sprint' : getSessionLabel(currentSessionType)}
</Text>
<Text style={styles.taskDescription}>
{currentSessionType === 'focus'
? task?.description || 'Focus on this task until the timer ends.'
: 'Use this timer as a real break before starting the next focus session.'}
</Text>
</Animated.View>
{postSessionPrompt ? (
<View style={styles.postSessionOverlay}>
<View style={styles.postSessionCard}>
<Text style={styles.postSessionEyebrow}>Session complete</Text>
<Text style={styles.postSessionTitle}>
{postSessionPrompt.completedSessionType === 'focus'
? 'What do you want to do next?'
: 'Break finished'}
</Text>
<Text style={styles.postSessionBody}>
{postSessionPrompt.completedSessionType === 'focus'
? 'Start a short break now or skip it and return to your dashboard.'
: 'Jump back into the same task or head back to the dashboard.'}
</Text>
{postSessionPrompt.completedSessionType === 'focus' ? (
<>
<TouchableOpacity onPress={handleStartShortBreak} style={styles.postSessionPrimaryButton}>
<Text style={styles.postSessionPrimaryButtonText}>Start short break</Text>
</TouchableOpacity>
<TouchableOpacity onPress={handleBackToDashboard} style={styles.postSessionSecondaryButton}>
<Text style={styles.postSessionSecondaryButtonText}>Skip break</Text>
</TouchableOpacity>
</>
) : (
<>
<TouchableOpacity onPress={handleContinueSameTask} style={styles.postSessionPrimaryButton}>
<Text style={styles.postSessionPrimaryButtonText}>Continue with same task</Text>
</TouchableOpacity>
<TouchableOpacity onPress={handleBackToDashboard} style={styles.postSessionSecondaryButton}>
<Text style={styles.postSessionSecondaryButtonText}>Back to dashboard</Text>
</TouchableOpacity>
</>
)}
</View>
</View>
) : null}
</View>
);
}
@@ -915,6 +1106,27 @@ const styles = StyleSheet.create({
timerPickerList: {
flexGrow: 0,
},
fixedDurationBlock: {
position: 'absolute',
top: height * 0.28,
left: 32,
right: 32,
alignItems: 'center',
},
fixedDurationLabel: {
color: colors.text,
fontSize: 56,
fontFamily: 'Menlo',
fontWeight: '900',
textAlign: 'center',
},
fixedDurationDescription: {
color: colors.text,
fontSize: 18,
lineHeight: 26,
marginTop: 16,
textAlign: 'center',
},
timerPickerContent: {
paddingHorizontal: ITEM_SPACING,
},
@@ -984,4 +1196,66 @@ const styles = StyleSheet.create({
right: 0,
alignItems: 'center',
},
postSessionOverlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(20, 26, 34, 0.94)',
justifyContent: 'center',
paddingHorizontal: 24,
zIndex: 10,
},
postSessionCard: {
borderRadius: 28,
backgroundColor: '#F7F4EA',
paddingHorizontal: 24,
paddingVertical: 28,
},
postSessionEyebrow: {
color: '#7A6F5A',
fontSize: 13,
fontWeight: '700',
letterSpacing: 0.8,
textTransform: 'uppercase',
},
postSessionTitle: {
color: '#323F4E',
fontSize: 30,
fontWeight: '800',
marginTop: 10,
},
postSessionBody: {
color: '#52606D',
fontSize: 17,
lineHeight: 25,
marginTop: 12,
marginBottom: 24,
},
postSessionPrimaryButton: {
minHeight: 54,
borderRadius: 18,
backgroundColor: '#323F4E',
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 20,
},
postSessionPrimaryButtonText: {
color: '#FFFFFF',
fontSize: 16,
fontWeight: '800',
},
postSessionSecondaryButton: {
minHeight: 54,
borderRadius: 18,
borderWidth: 1,
borderColor: '#C2B8A3',
backgroundColor: '#EFE7D8',
alignItems: 'center',
justifyContent: 'center',
paddingHorizontal: 20,
marginTop: 12,
},
postSessionSecondaryButtonText: {
color: '#323F4E',
fontSize: 16,
fontWeight: '700',
},
});

24
app/task/upsertTask.tsx
View File

@@ -19,12 +19,14 @@ import {
} from 'react-native';
export default function UpsertTask() {
const { tId, aId: routeAId } = useLocalSearchParams<{
const { tId, aId: routeAId, flow } = useLocalSearchParams<{
tId?: string;
aId?: string;
flow?: string;
}>();
const isEditMode = Boolean(tId);
const isSetupFlow = flow === 'setup';
const [title, SetTitle] = useState('');
const [description, SetDescription] = useState('');
@@ -100,7 +102,7 @@ export default function UpsertTask() {
const result =
isEditMode && tId
? await supabase.from('tasks').update(payload).eq('tId', tId)
: await supabase.from('tasks').insert(payload);
: await supabase.from('tasks').insert(payload).select().single();
if (result.error) {
SetIsSaving(false);
@@ -122,6 +124,14 @@ export default function UpsertTask() {
SetIsSaving(false);
if (!isEditMode && isSetupFlow && result.data?.tId) {
router.replace({
pathname: '/task/timer',
params: { tId: result.data.tId },
});
return;
}
Alert.alert(
isEditMode ? 'Task successfully updated!' : 'Task successfully created!'
);
@@ -183,7 +193,7 @@ export default function UpsertTask() {
<Text className={labelClassName}>Title</Text>
<TextInput
className={inputClassName}
placeholder="Enter task title"
placeholder={isSetupFlow ? 'e.g. Solve questions 1-3' : 'Enter task title'}
placeholderTextColor="#9CA3AF"
value={title}
onChangeText={SetTitle}
@@ -195,7 +205,11 @@ export default function UpsertTask() {
<Text className={labelClassName}>Description</Text>
<TextInput
className={`${inputClassName} min-h-28`}
placeholder="Add a short description"
placeholder={
isSetupFlow
? 'e.g. Work through the first three tasks without notes'
: 'Add a short description'
}
placeholderTextColor="#9CA3AF"
value={description}
onChangeText={SetDescription}
@@ -273,4 +287,4 @@ export default function UpsertTask() {
</KeyboardAvoidingView>
</>
);
}
}

83
app/task/viewDetailsTask.tsx
View File

@@ -1,4 +1,4 @@
import { GetActiveSprint, RemoveActiveSprint } from '@/lib/asyncStorage';
import { GetActiveSession, RemoveActiveSession } from '@/lib/asyncStorage';
import { formatDateTime } from '@/lib/date';
import { CheckAssignmentCompletion } from '@/lib/progress';
import { getSubjectColorSet, type SubjectColor } from '@/lib/subjectColors';
@@ -33,6 +33,7 @@ const { tId } = useLocalSearchParams<{ tId: string }>();
const [task, SetTask] = useState<Task | null>(null);
const [session, SetSession] = useState<Session | null>(null);
const [completedFocusSessions, setCompletedFocusSessions] = useState(0);
const [contextMeta, setContextMeta] = useState({
subjectTitle: 'No Subject',
assignmentTitle: 'No Assignment',
@@ -49,7 +50,24 @@ useEffect(() => {
return () => sub.subscription.unsubscribe();
}, []);
const GetTask = async (taskId: string) => {
const loadTaskStudyActivity = useCallback(async (taskId: string, userId: string) => {
const { count, error } = await supabase
.from('sprint_sessions')
.select('sessionId', { count: 'exact', head: true })
.eq('taskId', taskId)
.eq('userId', userId)
.eq('sessionType', 'focus')
.eq('status', 'completed');
if (error) {
setCompletedFocusSessions(0);
return;
}
setCompletedFocusSessions(count ?? 0);
}, []);
const GetTask = useCallback(async (taskId: string) => {
const { data, error } = await supabase
.from('tasks')
.select('*')
@@ -62,6 +80,7 @@ const GetTask = async (taskId: string) => {
}
SetTask(data);
await loadTaskStudyActivity(taskId, data.uId);
if (data.aId) {
const { data: assignmentData, error: assignmentError } = await supabase
@@ -102,20 +121,20 @@ const GetTask = async (taskId: string) => {
});
}
}
};
}, [loadTaskStudyActivity]);
useFocusEffect(
useCallback(() => {
if (session && tId) {
GetTask(tId);
}
}, [session, tId])
}, [GetTask, session, tId])
);
const handleSprintStart = async () => {
const activeSprint = await GetActiveSprint();
const activeSession = await GetActiveSession();
if (!activeSprint) {
if (!activeSession) {
router.push({
pathname: '/task/timer',
params: { tId: task?.tId},
@@ -125,10 +144,10 @@ const handleSprintStart = async () => {
const secondsLeft = Math.ceil((activeSprint.endTime - Date.now()) / 1000)
const secondsLeft = Math.ceil((activeSession.endTime - Date.now()) / 1000)
if (secondsLeft <= 0) {
await RemoveActiveSprint();
await RemoveActiveSession();
router.push({
pathname: '/task/timer',
params: { tId: task?.tId}
@@ -137,23 +156,23 @@ const handleSprintStart = async () => {
}
if (activeSprint!.taskId === task?.tId) {
if (activeSession.taskId === task?.tId) {
router.push({
pathname: '/task/timer',
params: { tId: activeSprint!.taskId}});
params: { tId: activeSession.taskId ?? undefined }});
return;
}
Alert.alert(
'Active sprint in progress',
'Starting a new sprint will end the current active sprint',
'Active session in progress',
'Starting a new sprint will end the current active session',
[
{ text: 'Cancel', style: 'cancel', },
{
text: 'Start new sprint',
style: 'destructive',
onPress: async () => {
await RemoveActiveSprint();
await RemoveActiveSession();
router.push({
pathname: '/task/timer',
params: { tId: task?.tId },
@@ -332,14 +351,46 @@ return (
{contextMeta.assignmentTitle}
</Text>
</View>
<View className="mr-2 mb-2 rounded-full bg-app-subtle px-3 py-1">
<Text className="text-xs font-semibold text-text-secondary">
Status: {task.isCompleted ? 'Completed' : 'Not completed'}
</Text>
</View>
</View>
<View className="mt-5 rounded-2xl bg-app-subtle p-4">
<Text className="text-sm font-semibold text-text-secondary">
Study activity
</Text>
<Text className="mt-1 text-xs leading-5 text-text-muted">
This tracks focused work on the task separately from whether the task is marked completed.
</Text>
<View className="mt-4 flex-row gap-3">
<View className="flex-1 rounded-2xl bg-app-surface px-4 py-3">
<Text className="text-xs font-semibold uppercase tracking-[0.6px] text-text-muted">
Focus time
</Text>
<Text className="mt-1 text-lg font-bold text-text-main">
{formatTrackedTime(task.totalTimeInSeconds ?? 0)}
</Text>
</View>
<View className="flex-1 rounded-2xl bg-app-surface px-4 py-3">
<Text className="text-xs font-semibold uppercase tracking-[0.6px] text-text-muted">
Completed sessions
</Text>
<Text className="mt-1 text-lg font-bold text-text-main">
{completedFocusSessions}
</Text>
</View>
</View>
</View>
<Text className="mt-2 text-sm text-text-muted">
Last changed: {formatDateTime(task.lastChanged)}
</Text>
<Text className="mt-1 text-sm text-text-muted">
Time spent: {formatTrackedTime(task.totalTimeInSeconds ?? 0)}
</Text>
</View>
</View>