added help button and improved dashboard styling to be in line with the rest of the project

This commit is contained in:
Chris Sanden
2026-05-02 20:01:40 +02:00
parent b437643475
commit 219d599617
2 changed files with 364 additions and 112 deletions

View File

@@ -1,4 +1,3 @@
import { defaultStyles } from "@/constants/defaultStyles";
import {
GetActiveSprint,
RemoveActiveSprint,
@@ -6,11 +5,20 @@ import {
} from '@/lib/asyncStorage';
import { formatDate } from '@/lib/date';
import { RegisterForLocalNotificationsAsync } from '@/lib/notifications';
import { CheckAssignmentCompletion } from '@/lib/progress';
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 { useCallback, useEffect, useState } from 'react';
import { Button, Pressable, StyleSheet, Text, View } from "react-native";
import {
Alert,
Modal,
Pressable,
ScrollView,
Text,
View,
} from "react-native";
type UpcomingDeadlineTask = {
tId: string;
@@ -22,6 +30,29 @@ type UpcomingDeadlineTask = {
deadline: string;
};
const FLOW_STEPS = [
{
label: '1',
title: 'Subject',
description: 'A subject is the top-level container for one course or area you are studying.',
},
{
label: '2',
title: 'Assignment',
description: 'Each subject contains assignments like projects, exercises, or exam prep blocks.',
},
{
label: '3',
title: 'Task',
description: 'Assignments are broken down into tasks so you always have one concrete thing to work on.',
},
{
label: '4',
title: 'Sprint',
description: 'A sprint is one focused work session tied to a single task and tracked by the timer.',
},
] as const;
function formatTime(totalSeconds: number) {
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
@@ -36,6 +67,8 @@ export default function HomeScreen() {
const [activeSprintTaskDesc, setActiveSprintTaskDesc] = useState<string | null>(null);
const [remainingSeconds, setRemainingSeconds] = useState(0);
const [upcomingDeadlineTasks, setUpcomingDeadlineTasks] = useState<UpcomingDeadlineTask[]>([]);
const [isFlowInfoVisible, setIsFlowInfoVisible] = useState(false);
const [completingTaskId, setCompletingTaskId] = useState<string | null>(null);
const loadActiveSprint = useCallback(async () => {
const storedSprint = await GetActiveSprint();
@@ -221,37 +254,177 @@ export default function HomeScreen() {
return () => clearInterval(intervalId);
}, [activeSprint]);
const handleTaskCompletion = useCallback(async (task: UpcomingDeadlineTask) => {
if (completingTaskId) {
return;
}
setCompletingTaskId(task.tId);
const { error } = await supabase
.from('tasks')
.update({
isCompleted: true,
lastChanged: new Date().toISOString(),
})
.eq('tId', task.tId);
if (error) {
setCompletingTaskId(null);
Alert.alert('Task could not be completed, please try again');
return;
}
try {
await CheckAssignmentCompletion(task.aId);
} catch {
setCompletingTaskId(null);
Alert.alert('Task was updated, but assignment progress could not be refreshed');
return;
}
setUpcomingDeadlineTasks((currentTasks) =>
currentTasks.filter((currentTask) => currentTask.tId !== task.tId)
);
setCompletingTaskId(null);
}, [completingTaskId]);
return (
<View style={defaultStyles.container}>
<View className="flex-1 bg-app-bg">
<Stack.Screen
options={{
title: "Home",
title: 'Dashboard',
headerTitleAlign: 'center',
headerTitleStyle: defaultStyles.title,
headerLeft: () => {
return (
<View className="ml-3">
<Pressable
className="h-10.5 w-11 items-center justify-center rounded-full"
onPress={() => setIsFlowInfoVisible(true)}
>
<MaterialIcons name="help" size={36} color="#52606D" />
</Pressable>
</View>
)
},
headerRight: () => {
return (
<View style={defaultStyles.buttonContainer}>
<Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
<View className="mr-3">
<Pressable
className="rounded-full bg-app-subtle px-4 py-2"
onPress={async () => await supabase.auth.signOut()}
>
<Text className="text-sm font-semibold text-text-secondary">
Logout
</Text>
</Pressable>
</View>
)
},
}}
/>
<View style={defaultStyles.container}>
<View className="m-1 flex-1 p-6">
<Modal
animationType="fade"
transparent
visible={isFlowInfoVisible}
onRequestClose={() => setIsFlowInfoVisible(false)}
>
<View className="flex-1 justify-center bg-[rgba(15,23,42,0.42)] px-5">
<Pressable
className="absolute inset-0"
onPress={() => setIsFlowInfoVisible(false)}
/>
<View className="max-h-[80%] gap-4 rounded-[28px] bg-[#FCFDFE] p-5 shadow-lg">
<View className="flex-row items-start justify-between gap-3">
<View>
<Text className="text-xs font-bold uppercase tracking-[0.8px] text-[#7B8794]">
How the app is structured
</Text>
<Text className="mt-1 text-[28px] font-extrabold text-[#1F2933]">
Study flow
</Text>
</View>
<Pressable
className="h-9 w-9 items-center justify-center rounded-full bg-[#EFF3F8]"
onPress={() => setIsFlowInfoVisible(false)}
>
<MaterialIcons name="close" size={18} color="#52606D" />
</Pressable>
</View>
<Text className="text-[15px] leading-[22px] text-[#52606D]">
Build your work from the big container down to the focused work session.
</Text>
<ScrollView
className="max-h-80"
contentContainerStyle={{ gap: 4 }}
showsVerticalScrollIndicator={false}
>
{FLOW_STEPS.map((step, index) => (
<View key={step.title} className="flex-row gap-[14px]">
<View className="items-center">
<View className="h-8 w-8 items-center justify-center rounded-full bg-[#323F4E]">
<Text className="text-[13px] font-extrabold text-white">{step.label}</Text>
</View>
{index < FLOW_STEPS.length - 1 ? (
<View className="my-[6px] min-h-7 w-[2px] flex-1 bg-[#D5D9DF]" />
) : null}
</View>
<View className="flex-1 pb-[18px]">
<Text className="text-lg font-bold text-[#1F2933]">{step.title}</Text>
<Text className="mt-1 text-sm leading-[21px] text-[#52606D]">
{step.description}
</Text>
</View>
</View>
))}
</ScrollView>
<View className="rounded-[18px] bg-[#F1F5F9] px-4 py-[14px]">
<Text className="text-xs font-bold uppercase tracking-[0.8px] text-[#7B8794]">
Quick map
</Text>
<Text className="mt-[6px] text-base font-bold text-[#1F2933]">
{'Subject -> Assignment -> Task -> Sprint'}
</Text>
</View>
<Pressable
className="min-h-12 items-center justify-center rounded-2xl bg-[#323F4E] px-4"
onPress={() => {
setIsFlowInfoVisible(false);
router.push('/subjects');
}}
>
<Text className="text-[15px] font-bold text-white">Start with Subjects</Text>
</Pressable>
</View>
</View>
</Modal>
{activeSprint ? (
<View style={styles.activeSprintCard}>
<Text style={styles.cardEyebrow}>Active Sprint</Text>
<Text style={styles.cardTitle}>
<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-[20px] font-bold text-[#1F2933]">
{activeSprintTaskTitle ?? 'Selected task'}
</Text>
<Text style={styles.cardDesc}> {activeSprintTaskDesc ?? null} </Text>
<Text style={styles.cardMeta}>
<Text className="text-sm font-medium text-[#38414b]">
{' '}
{activeSprintTaskDesc ?? null}
{' '}
</Text>
<Text className="text-[15px] text-[#52606D]">
{formatTime(remainingSeconds)} remaining
</Text>
<Pressable
style={styles.resumeButton}
className="mt-2 min-h-11 items-center justify-center rounded-xl bg-[#323F4E] px-4"
onPress={() =>
router.push({
pathname: '/task/timer',
@@ -259,21 +432,25 @@ export default function HomeScreen() {
})
}
>
<Text style={styles.resumeButtonText}>Open Sprint</Text>
<Text className="text-[15px] font-bold text-white">Open Sprint</Text>
</Pressable>
</View>
) : (
<>
<Text style={defaultStyles.body}>No active sprint right now.</Text>
<Text className="mx-1 my-1 text-left text-base font-normal">
No active sprint right now.
</Text>
<View style={styles.deadlineSection}>
<Text style={styles.sectionTitle}>Tasks with upcoming deadlines</Text>
<View className="mt-6 gap-3">
<Text className="text-lg font-bold text-[#1F2933]">
Tasks with upcoming deadlines
</Text>
{upcomingDeadlineTasks.length > 0 ? (
upcomingDeadlineTasks.map((task) => (
<Pressable
key={task.tId}
style={styles.deadlineTaskCard}
className="gap-[6px] rounded-2xl border border-[#D5D9DF] bg-white p-4"
onPress={() =>
router.push({
pathname: '/task/viewDetailsTask',
@@ -281,19 +458,49 @@ export default function HomeScreen() {
})
}
>
<Text style={styles.deadlineTaskTitle}>{task.title}</Text>
<Text className="text-base font-bold text-[#1F2933]">{task.title}</Text>
{task.description ? (
<Text style={styles.deadlineTaskDescription} numberOfLines={2}>
<Text className="text-sm text-[#52606D]" numberOfLines={2}>
{task.description}
</Text>
) : null}
<Text style={styles.deadlineTaskMeta}>
<Text className="text-[13px] font-semibold text-[#7B8794]">
{task.subjectTitle} {task.assignmentTitle} {formatDate(task.deadline)}
</Text>
<Pressable
className={`mt-2 min-h-10 items-center justify-center rounded-xl px-4 ${
completingTaskId === task.tId ? 'bg-[#9AA5B1]' : 'bg-[#323F4E]'
}`}
disabled={completingTaskId !== null}
onPress={(event) => {
event.stopPropagation();
Alert.alert(
'Complete task',
'Mark this task as completed?',
[
{
text: 'Cancel',
style: 'cancel',
},
{
text: 'Complete',
onPress: () => {
void handleTaskCompletion(task);
},
},
]
);
}}
>
<Text className="text-sm font-bold text-white">
{completingTaskId === task.tId ? 'Completing...' : 'Mark as completed'}
</Text>
</Pressable>
</Pressable>
))
) : (
<Text style={styles.emptyDeadlineText}>No upcoming task deadlines.</Text>
<Text className="text-sm text-[#7B8794]">No upcoming task deadlines.</Text>
)}
</View>
</>
@@ -302,82 +509,3 @@ export default function HomeScreen() {
</View>
);
}
const styles = StyleSheet.create({
activeSprintCard: {
borderWidth: 1,
borderColor: '#D5D9DF',
borderRadius: 16,
padding: 16,
backgroundColor: '#F7F9FC',
gap: 8,
},
cardEyebrow: {
fontSize: 13,
fontWeight: '600',
color: '#5D6B7A',
},
cardTitle: {
fontSize: 20,
fontWeight: '700',
color: '#1F2933',
},
cardDesc: {
fontSize: 14,
fontWeight: '500',
color: '#38414b',
},
cardMeta: {
fontSize: 15,
color: '#52606D',
},
resumeButton: {
marginTop: 8,
minHeight: 44,
borderRadius: 12,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#323F4E',
paddingHorizontal: 16,
},
resumeButtonText: {
fontSize: 15,
fontWeight: '700',
color: '#FFFFFF',
},
deadlineSection: {
marginTop: 24,
gap: 12,
},
sectionTitle: {
fontSize: 18,
fontWeight: '700',
color: '#1F2933',
},
deadlineTaskCard: {
borderWidth: 1,
borderColor: '#D5D9DF',
borderRadius: 16,
padding: 16,
backgroundColor: '#FFFFFF',
gap: 6,
},
deadlineTaskTitle: {
fontSize: 16,
fontWeight: '700',
color: '#1F2933',
},
deadlineTaskDescription: {
fontSize: 14,
color: '#52606D',
},
deadlineTaskMeta: {
fontSize: 13,
fontWeight: '600',
color: '#7B8794',
},
emptyDeadlineText: {
fontSize: 14,
color: '#7B8794',
},
});

View File

@@ -1,16 +1,41 @@
import { SUBJECT_COLORS } from '@/lib/subjectColors';
import { supabase } from '@/lib/supabase';
import { Subject } from '@/lib/types';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { Session } from '@supabase/supabase-js';
import { router, Stack, useFocusEffect } from 'expo-router';
import { useCallback, useEffect, useState } from 'react';
import { Alert, Pressable, ScrollView, Text, View } from 'react-native';
import { Alert, Modal, Pressable, ScrollView, Text, View } from 'react-native';
import type { SubjectColor } from '@/lib/subjectColors';
const FLOW_STEPS = [
{
label: '1',
title: 'Subject',
description: 'A subject is the top-level container for one course or area you are studying.',
},
{
label: '2',
title: 'Assignment',
description: 'Each subject contains assignments like projects, exercises, or exam prep blocks.',
},
{
label: '3',
title: 'Task',
description: 'Assignments are broken down into tasks so you always have one concrete thing to work on.',
},
{
label: '4',
title: 'Sprint',
description: 'A sprint is one focused work session tied to a single task and tracked by the timer.',
},
] as const;
export default function Subjects() {
const [subjects, SetSubjects] = useState<Subject[]>([]);
const [session, SetSession] = useState<Session | null>(null);
const [isFlowInfoVisible, setIsFlowInfoVisible] = useState(false);
useEffect(() => {
supabase.auth.getSession().then(({ data }) => {
@@ -57,19 +82,118 @@ export default function Subjects() {
options={{
title: 'Subjects',
headerTitleAlign: 'center',
headerLeft: () => (
<View className="ml-3">
<Pressable
className="h-10.5 w-11 items-center justify-center rounded-full"
onPress={() => setIsFlowInfoVisible(true)}
>
<MaterialIcons name="help" size={36} color="#52606D" />
</Pressable>
</View>
),
headerRight: () => (
<Pressable
className="rounded-full bg-app-subtle px-4 py-2"
onPress={async () => await supabase.auth.signOut()}
>
<Text className="text-sm font-semibold text-text-secondary">
Logout
</Text>
</Pressable>
<View className="mr-3">
<Pressable
className="rounded-full bg-app-subtle px-4 py-2"
onPress={async () => await supabase.auth.signOut()}
>
<Text className="text-sm font-semibold text-text-secondary">
Logout
</Text>
</Pressable>
</View>
),
}}
/>
<Modal
animationType="fade"
transparent
visible={isFlowInfoVisible}
onRequestClose={() => setIsFlowInfoVisible(false)}
>
<View className="flex-1 justify-center bg-[rgba(15,23,42,0.42)] px-5">
<Pressable
className="absolute inset-0"
onPress={() => setIsFlowInfoVisible(false)}
/>
<View className="max-h-[80%] gap-4 rounded-[28px] bg-[#FCFDFE] p-5 shadow-lg">
<View className="flex-row items-start justify-between gap-3">
<View>
<Text className="text-xs font-bold uppercase tracking-[0.8px] text-[#7B8794]">
How the app is structured
</Text>
<Text className="mt-1 text-[28px] font-extrabold text-[#1F2933]">
Study flow
</Text>
</View>
<Pressable
className="h-9 w-9 items-center justify-center rounded-full bg-[#EFF3F8]"
onPress={() => setIsFlowInfoVisible(false)}
>
<MaterialIcons name="close" size={18} color="#52606D" />
</Pressable>
</View>
<Text className="text-[15px] leading-[22px] text-[#52606D]">
Build your work from the big container down to the focused work session.
</Text>
<ScrollView
className="max-h-80"
contentContainerStyle={{ gap: 4 }}
showsVerticalScrollIndicator={false}
>
{FLOW_STEPS.map((step, index) => (
<View key={step.title} className="flex-row gap-[14px]">
<View className="items-center">
<View className="h-8 w-8 items-center justify-center rounded-full bg-[#323F4E]">
<Text className="text-[13px] font-extrabold text-white">
{step.label}
</Text>
</View>
{index < FLOW_STEPS.length - 1 ? (
<View className="my-[6px] min-h-7 w-[2px] flex-1 bg-[#D5D9DF]" />
) : null}
</View>
<View className="flex-1 pb-[18px]">
<Text className="text-lg font-bold text-[#1F2933]">
{step.title}
</Text>
<Text className="mt-1 text-sm leading-[21px] text-[#52606D]">
{step.description}
</Text>
</View>
</View>
))}
</ScrollView>
<View className="rounded-[18px] bg-[#F1F5F9] px-4 py-[14px]">
<Text className="text-xs font-bold uppercase tracking-[0.8px] text-[#7B8794]">
Quick map
</Text>
<Text className="mt-[6px] text-base font-bold text-[#1F2933]">
{'Subject -> Assignment -> Task -> Sprint'}
</Text>
</View>
<Pressable
className="min-h-12 items-center justify-center rounded-2xl bg-[#323F4E] px-4"
onPress={() => {
setIsFlowInfoVisible(false);
router.push('/subjects');
}}
>
<Text className="text-[15px] font-bold text-white">Start with Subjects</Text>
</Pressable>
</View>
</View>
</Modal>
<ScrollView
className="flex-1"
contentContainerStyle={{
@@ -179,4 +303,4 @@ export default function Subjects() {
</ScrollView>
</View>
);
}
}