docker compose for backend +frontend

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

@@ -30,7 +30,7 @@ export default function CalendarScreen() {
   const { theme } = useSettings();
   const { collections } = useDatabase();
   const categories = useCategories();
-  const { modals, openTaskMenu } = useTaskModals();
+  const { modals, openTaskEdit } = useTaskModals();
 
   const [visibleMonth, setVisibleMonth] = useState(() => new Date());
   const [selectedDate, setSelectedDate] = useState(() => new Date());
@@ -301,7 +301,7 @@ export default function CalendarScreen() {
                       </Text>
                     </TouchableOpacity>
 
-                    <TouchableOpacity style={styles.menuButton} onPress={() => openTaskMenu(task)} activeOpacity={0.7}>
+                    <TouchableOpacity style={styles.menuButton} onPress={() => openTaskEdit(task.id)} activeOpacity={0.7} accessibilityRole="button" accessibilityLabel={`Edit ${task.title}`}>
                       <Svg width={20} height={20} viewBox="0 0 24 24">
                         <Circle cx={12} cy={5} r={1.5} fill={theme.textMuted} />
                         <Circle cx={12} cy={12} r={1.5} fill={theme.textMuted} />

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

@@ -19,9 +19,9 @@ import Svg, { Path } from 'react-native-svg';
 import ColorWheel from '@/components/ColorWheel';
 
 export default function SettingsScreen() {
-  const { theme, notifications, setNotifications, defaultCategoryId, setDefaultCategoryId, sortBy, setSortBy, reminderPreference, setReminderPreference, apiUrl, accentColor, setAccentColor } = useSettings();
+  const { theme, notifications, setNotifications, defaultCategoryId, setDefaultCategoryId, sortBy, setSortBy, reminderPreference, setReminderPreference, apiUrl, accentColor, setAccentColor, todoAheadDays, setTodoAheadDays } = useSettings();
   const categories = useCategories();
-  const [picker, setPicker] = useState<null | 'category' | 'sort' | 'reminder'>(null);
+  const [picker, setPicker] = useState<null | 'category' | 'sort' | 'reminder' | 'todoAhead'>(null);
   const [editingCategory, setEditingCategory] = useState<Category | null | 'new'>(null);
   const [syncVisible, setSyncVisible] = useState(false);
   const [friendsVisible, setFriendsVisible] = useState(false);
@@ -92,6 +92,10 @@ export default function SettingsScreen() {
     setReminderPreference((Array.isArray(value) ? value[0] : value) as typeof reminderPreference);
   };
 
+  const handleTodoAheadDays = (value: string | string[]) => {
+    setTodoAheadDays(parseInt(Array.isArray(value) ? value[0] : value, 10));
+  };
+
   const editorVisible = editingCategory !== null;
   const editorCategory = editingCategory === 'new' ? null : editingCategory;
 
@@ -156,6 +160,12 @@ export default function SettingsScreen() {
           onPress={() => setPicker('sort')}
           showChevron
         />
+        <ListItem
+          title="Show Calendar Tasks"
+          subtitle={todoAheadDays === 0 ? 'Only today' : `Up to ${todoAheadDays} days ahead`}
+          onPress={() => setPicker('todoAhead')}
+          showChevron
+        />
         <Text style={[styles.sectionTitle, { color: theme.textMuted }]}>Appearance</Text>
         <Text style={[styles.sectionHint, { color: theme.textFaint }]}>Accent color</Text>
         <View style={styles.accentPresets}>
@@ -256,6 +266,15 @@ export default function SettingsScreen() {
         onClose={() => setPicker(null)}
       />
 
+      <OptionPickerModal
+        visible={picker === 'todoAhead'}
+        title="Calendar Tasks in Todo"
+        options={AHEAD_OPTIONS}
+        selectedValue={String(todoAheadDays)}
+        onSelect={handleTodoAheadDays}
+        onClose={() => setPicker(null)}
+      />
+
       <CategoryEditorModal
         visible={editorVisible}
         category={editorCategory}
@@ -313,6 +332,11 @@ export default function SettingsScreen() {
   );
 }
 
+const AHEAD_OPTIONS: { value: string; label: string }[] = Array.from({ length: 29 }, (_, i) => ({
+  value: String(i),
+  label: i === 0 ? 'Only today' : `${i} day${i === 1 ? '' : 's'}`,
+}));
+
 function formatSyncTime(timestamp: number): string {
   const seconds = Math.floor((Date.now() - timestamp) / 1000);
   if (seconds < 60) return 'just now';