Merge branch 'main' into timerTask

app/(tabs)/subjects.tsx

@@ -1,12 +1,12 @@
-import { SUBJECT_COLORS } from '@/lib/subjectColors';
 import { getSetupStatus } from '@/lib/setupStatus';
+import { SUBJECT_COLORS, type SubjectColor } 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 { Redirect, router, Stack, useFocusEffect } from 'expo-router';
 import { useCallback, useEffect, useState } from 'react';
-import { Alert, Modal, Pressable, ScrollView, Text, View } from 'react-native';
+import { Alert, Modal, Pressable, ScrollView, Text, View, ActivityIndicator } from 'react-native';
 
 import type { SubjectColor } from '@/lib/subjectColors';
 
@@ -38,6 +38,10 @@ export default function Subjects() {
   const [session, SetSession] = useState<Session | null>(null);
   const [isFlowInfoVisible, setIsFlowInfoVisible] = useState(false);
   const [needsSetup, setNeedsSetup] = useState<boolean | null>(null);
+  const [isLoading, SetIsLoading] = useState(true);
+
+  const activeSubjects = subjects.filter((subject) => subject.isActive);
+  const inactiveSubjects = subjects.filter((subject) => !subject.isActive);
 
   useEffect(() => {
     supabase.auth.getSession().then(({ data }) => {
@@ -74,6 +78,15 @@ export default function Subjects() {
 
   const GetSubjects = useCallback(async () => {
     if (!session?.user.id) return;
+  const GetSubjects = async () => {
+    if (!session?.user.id) {
+      SetIsLoading(false);
+      return;
+    }
+
+    SetIsLoading(true);
+
+    SetIsLoading(true);
 
     const { data, error } = await supabase
       .from('subjects')
@@ -81,13 +94,18 @@ export default function Subjects() {
       .eq('uId', session.user.id)
       .order('lastChanged', { ascending: false });
 
+    SetIsLoading(false);  
+
     if (error) {
       Alert.alert('Subjects could not be fetched, please try again');
+      SetIsLoading(false);
       return;
     }
 
     SetSubjects((data as Subject[]) ?? []);
   }, [session?.user.id]);
+    SetIsLoading(false);
+  };
 
   useFocusEffect(
     useCallback(() => {
@@ -103,6 +121,78 @@ export default function Subjects() {
 
   if (needsSetup) {
     return <Redirect href="/setup" />;
+  const RenderSubjectCard = (subject: Subject) => {
+    const colorKey: SubjectColor = subject.color ?? 'slate';
+    const colorSet = SUBJECT_COLORS[colorKey];
+    const firstLetter = subject.title?.trim().charAt(0).toUpperCase() || '?';
+
+    return (
+      <Pressable
+        key={subject.sId}
+        className="mb-4 rounded-3xl bg-app-surface p-4"
+        style={{
+          borderWidth: 1,
+          borderColor: colorSet.strong,
+        }}
+        onPress={() =>
+          router.push({
+            pathname: '/subject/viewDetailsSubject',
+            params: { sId: subject.sId },
+          })
+        }
+      >
+        <View className="flex-row items-center">
+          <View
+            className="mr-3 h-12 w-12 items-center justify-center rounded-2xl"
+            style={{ backgroundColor: colorSet.soft }}
+          >
+            <Text
+              className="text-base font-bold"
+              style={{ color: colorSet.strong }}
+            >
+              {firstLetter}
+            </Text>
+          </View>
+
+          <View className="flex-1">
+            <Text
+              className="text-base font-bold text-text-main"
+              numberOfLines={1}
+            >
+              {subject.title}
+            </Text>
+
+            <Text
+              className="mt-1 text-sm leading-5 text-text-secondary"
+              numberOfLines={2}
+            >
+              {subject.description || 'No description added.'}
+            </Text>
+          </View>
+
+          <View className="ml-3">
+            <View
+              className="rounded-full px-3 py-1"
+              style={{ backgroundColor: colorSet.soft }}
+            >
+              <Text
+                className="text-xs font-semibold"
+                style={{ color: colorSet.strong }}
+              >
+                {subject.isActive ? 'Active' : 'Inactive'}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </Pressable>
+    );
+  };
+  if (isLoading) {
+    return (
+      <View className="flex-1 items-center justify-center bg-app-bg">
+        <ActivityIndicator size="large" />
+      </View>
+    );
   }
 
   return (
@@ -232,14 +322,14 @@ export default function Subjects() {
         }}
         showsVerticalScrollIndicator={false}
       >
-        <View className="mb-6">
-          <Text className="text-3xl font-bold text-text-main">Subjects</Text>
-          <Text className="mt-2 text-base leading-6 text-text-secondary">
-            Pick a subject to manage assignments and tasks.
-          </Text>
-        </View>
-
-        {subjects.length === 0 ? (
+        {isLoading ? (
+          <View className="items-center justify-center rounded-3xl border border-app-border bg-app-surface p-5">
+            <ActivityIndicator size="large" color="#2563eb" />
+            <Text className="mt-4 text-center text-base font-semibold text-text-secondary">
+              Loading subjects...
+            </Text>
+          </View>
+        ) : subjects.length === 0 ? (
           <View className="rounded-3xl border border-app-border bg-app-surface p-5">
             <Text className="text-center text-xl font-bold text-text-main">
               No subjects yet
@@ -260,74 +350,55 @@ export default function Subjects() {
           </View>
         ) : (
           <View>
-            {subjects.map((subject) => {
-                const colorKey: SubjectColor = subject.color ?? 'slate';
-                const colorSet = SUBJECT_COLORS[colorKey];
+            <View className="mb-3 mt-2 flex-row items-center justify-between">
+              <Text className="text-lg font-bold text-text-main">
+                Active Subjects
+              </Text>
 
-              const firstLetter =
-                subject.title?.trim().charAt(0).toUpperCase() || '?';
+              <View className="rounded-full bg-app-subtle px-3 py-1">
+                <Text className="text-xs font-semibold text-text-muted">
+                  {activeSubjects.length}
+                </Text>
+              </View>
+            </View>
 
-              return (
-                <Pressable
-                  key={subject.sId}
-                  className="mb-4 rounded-3xl bg-app-surface p-4"
-                  style={{
-                    borderWidth: 1,
-                    borderColor: colorSet.strong,
-                  }}
-                  onPress={() =>
-                    router.push({
-                      pathname: '/subject/viewDetailsSubject',
-                      params: { sId: subject.sId },
-                    })
-                  }
-                >
-                  <View className="flex-row items-center">
-                    <View
-                      className="mr-3 h-12 w-12 items-center justify-center rounded-2xl"
-                      style={{ backgroundColor: colorSet.soft }}
-                    >
-                      <Text
-                        className="text-base font-bold"
-                        style={{ color: colorSet.strong }}
-                      >
-                        {firstLetter}
-                      </Text>
-                    </View>
+            {activeSubjects.length === 0 ? (
+              <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
+                <Text className="text-center text-base font-semibold text-text-secondary">
+                  No active subjects
+                </Text>
+                <Text className="mt-1 text-center text-sm text-text-muted">
+                  Subjects with ongoing work will show up here.
+                </Text>
+              </View>
+            ) : (
+              activeSubjects.map(RenderSubjectCard)
+            )}
 
-                    <View className="flex-1">
-                      <Text
-                        className="text-base font-bold text-text-main"
-                        numberOfLines={1}
-                      >
-                        {subject.title}
-                      </Text>
+            <View className="mb-3 mt-2 flex-row items-center justify-between">
+              <Text className="text-lg font-bold text-text-main">
+                Inactive Subjects
+              </Text>
 
-                      <Text
-                        className="mt-1 text-sm leading-5 text-text-secondary"
-                        numberOfLines={2}
-                      >
-                        {subject.description || 'No description added.'}
-                      </Text>
-                    </View>
+              <View className="rounded-full bg-app-subtle px-3 py-1">
+                <Text className="text-xs font-semibold text-text-muted">
+                  {inactiveSubjects.length}
+                </Text>
+              </View>
+            </View>
 
-                    <View className="ml-3">
-                      <View
-                        className="rounded-full px-3 py-1"
-                        style={{ backgroundColor: colorSet.soft }}
-                      >
-                        <Text
-                          className="text-xs font-semibold"
-                          style={{ color: colorSet.strong }}
-                        >
-                          {subject.isActive ? 'Active' : 'Inactive'}
-                        </Text>
-                      </View>
-                    </View>
-                  </View>
-                </Pressable>
-              );
-            })}
+            {inactiveSubjects.length === 0 ? (
+              <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
+                <Text className="text-center text-base font-semibold text-text-secondary">
+                  No inactive subjects
+                </Text>
+                <Text className="mt-1 text-center text-sm text-text-muted">
+                  Completed or paused subjects will show up here.
+                </Text>
+              </View>
+            ) : (
+              inactiveSubjects.map(RenderSubjectCard)
+            )}
           </View>
         )}