feat(app): subtask categories, live refresh on save, nested subtask fixes

carry-your-live/app/(tabs)/index.tsx

@@ -1,5 +1,5 @@
-import React, { useCallback } from 'react';
-import { View, Text, StyleSheet, SafeAreaView, BackHandler, KeyboardAvoidingView } from 'react-native';
+import React, { useCallback, useMemo, useState } from 'react';
+import { View, Text, StyleSheet, SafeAreaView, BackHandler, KeyboardAvoidingView, TouchableOpacity } from 'react-native';
 import { useFocusEffect } from 'expo-router';
 import { Header } from '@/components/Header';
 import { CategoryFilter } from '@/components/CategoryFilter';
@@ -7,11 +7,14 @@ import { TaskList } from '@/components/TaskList';
 import { QuickAddBar } from '@/components/QuickAddBar';
 import { useDatabase } from '@/hooks/useDatabase';
 import { useSettings } from '@/theme';
+import Svg, { Path, Circle } from 'react-native-svg';
 
 export default function TasksScreen() {
   const { isReady } = useDatabase();
-  const { theme } = useSettings();
-  const [selectedCategory, setSelectedCategory] = React.useState<string>('all');
+  const { theme, showCompleted, setShowCompleted } = useSettings();
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
+
+  const categoryIds = useMemo(() => selectedCategories, [selectedCategories]);
 
   useFocusEffect(
     useCallback(() => {
@@ -32,13 +35,41 @@ export default function TasksScreen() {
     <SafeAreaView style={[styles.container, { backgroundColor: theme.background }]}>
       <Header title="ToDo" showLogo={false} />
       <View style={styles.categoryFilterWrapper}>
-        <CategoryFilter selected={selectedCategory} onSelect={setSelectedCategory} />
+        <CategoryFilter selected={selectedCategories} onSelect={setSelectedCategories} />
+        <TouchableOpacity
+          style={[
+            styles.completedToggle,
+            { backgroundColor: theme.card, borderColor: showCompleted ? theme.accent : theme.borderStrong },
+          ]}
+          onPress={() => setShowCompleted(!showCompleted)}
+          activeOpacity={0.8}
+          accessibilityRole="switch"
+          accessibilityLabel="Show completed tasks"
+          accessibilityState={{ checked: showCompleted }}
+        >
+          <Svg width={14} height={14} viewBox="0 0 24 24">
+            <Circle
+              cx={12}
+              cy={12}
+              r={9}
+              stroke={showCompleted ? theme.accent : theme.textMuted}
+              strokeWidth={2}
+              fill="none"
+            />
+            {showCompleted && (
+              <Path d="M7 12.5l3.5 3.5 6.5-7" stroke={theme.accent} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" />
+            )}
+          </Svg>
+          <Text style={[styles.completedToggleText, { color: showCompleted ? theme.text : theme.textMuted }]}>
+            Completed
+          </Text>
+        </TouchableOpacity>
       </View>
       <KeyboardAvoidingView
         style={styles.kbAvoid}
         behavior="padding"
       >
-        <TaskList categoryId={selectedCategory} />
+        <TaskList categoryIds={categoryIds} showCompleted={showCompleted} />
         <QuickAddBar />
       </KeyboardAvoidingView>
     </SafeAreaView>
@@ -51,13 +82,25 @@ const styles = StyleSheet.create({
   },
   categoryFilterWrapper: {
     justifyContent: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingRight: 12,
+  },
+  completedToggle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    borderRadius: 18,
+    borderWidth: 1.5,
+    alignSelf: 'center',
+  },
+  completedToggleText: {
+    fontSize: 12,
+    fontWeight: '600',
   },
   kbAvoid: {
     flex: 1,
   },
-  loadingContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
 });