Merge remote-tracking branch 'origin/fix-minor-changes' into feat-proxy-optimization

Author: EthanL06

app/(tabs)/index.tsx

@@ -199,6 +199,16 @@ export default function Home() {
     }
   }, [layoutLoaded, isLoading, isFetching]);
 
+  // Show onboarding screen even while loading
+  if (!isOnboardingComplete) {
+    return (
+      <View style={{ flex: 1, backgroundColor: isDarkMode ? '#171717' : '#fff' }}>
+        <Stack.Screen options={{ title: 'Home' }} />
+        <OnboardingScreen isOnboardingComplete={isOnboardingComplete} />
+      </View>
+    );
+  }
+
   if (isLoading) {
     return (
       <View
@@ -261,8 +271,6 @@ export default function Home() {
     <View style={{ flex: 1, backgroundColor: isDarkMode ? '#171717' : '#fff' }}>
       <Stack.Screen options={{ title: 'Home' }} />
       <Container disableBottomPadding onLayout={onLayoutRootView}>
-        <OnboardingScreen isOnboardingComplete={isOnboardingComplete} />
-
         {isLoading ? (
           <View className="flex-1 items-center justify-center">
             <ActivityIndicator size="small" />

app/location/components/LocationHeader.tsx

@@ -8,7 +8,7 @@ import { useDatabase } from '~/hooks/useDatabase';
 import { useLocationDetails } from '~/hooks/useLocationDetails';
 import { location as location_schema, menu } from '~/services/database/schema';
 import { useSettingsStore } from '~/store/useSettingsStore';
-import { useLocationName, useMealTimes } from '~/utils/locations';
+import { useLocationName } from '~/utils/locations';
 import { generateSchedule, isLocationOpen } from '~/utils/time';
 import { cn } from '~/utils/utils';
 import DateNavigator from './DateNavigator';
@@ -46,7 +46,6 @@ const LocationHeader = React.memo(
 
     const { useColloquialNames } = useSettingsStore();
     const displayName = useLocationName(location, useColloquialNames);
-    const mealTimes = useMealTimes(location);
 
     const isDarkMode = useSettingsStore((state) => state.isDarkMode);
 
@@ -182,9 +181,7 @@ const LocationHeader = React.memo(
               <FilterBar
                 selectedItem={selectedMenu as string}
                 setSelectedItem={setSelectedMenu}
-                useTimeOfDayDefault={filters.length > 1}
                 items={filters}
-                mealTimes={mealTimes || undefined}
                 showFilterButton
               />
             </View>

components/FilterBar.tsx

@@ -1,24 +1,20 @@
 import * as Haptics from 'expo-haptics';
 import { Filter } from 'lucide-react-native';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { SheetManager } from 'react-native-actions-sheet';
 
 import type { FilterType } from '~/app/(tabs)';
 import { useFiltersStore } from '~/store/useFiltersStore';
 import { useSettingsStore } from '~/store/useSettingsStore';
 import { COLORS } from '~/utils/colors';
-import type { MealTimes } from '~/utils/locations';
-import { timeOfDay } from '~/utils/time';
 import { cn } from '~/utils/utils';
 
 type FilterBarProps = {
   selectedItem: string;
   setSelectedItem: (item: FilterType) => void;
   items: { id: string; title: string }[]; // Accepts dynamic items array
-  mealTimes?: MealTimes;
   showFilterButton?: boolean;
-  useTimeOfDayDefault?: boolean;
 };
 
 // Define the proper meal order
@@ -32,9 +28,7 @@ const FilterBar = ({
   selectedItem,
   setSelectedItem,
   items: filterItems,
-  mealTimes,
   showFilterButton = false,
-  useTimeOfDayDefault = false,
 }: FilterBarProps) => {
   const isDarkMode = useSettingsStore((state) => state.isDarkMode);
 
@@ -47,34 +41,6 @@ const FilterBar = ({
     });
   }, [filterItems]);
 
-  // When enabled, set default filter based on timeOfDay if none is selected.
-  useEffect(() => {
-    // If there's only one item, automatically select it
-    if (filterItems.length === 1 && !selectedItem) {
-      setSelectedItem(filterItems[0].id as FilterType);
-      return;
-    }
-
-    if (useTimeOfDayDefault && !selectedItem) {
-      const tod = mealTimes ? timeOfDay(new Date(), mealTimes) : timeOfDay(new Date());
-      let defaultFilter = '';
-
-      if (tod === 'morning') defaultFilter = 'Breakfast';
-      else if (tod === 'afternoon') defaultFilter = 'Lunch';
-      else if (tod === 'evening') defaultFilter = 'Dinner';
-
-      // Find item with matching title
-      const matchingItem = filterItems.find((item) => item.title === defaultFilter);
-
-      if (matchingItem) {
-        setSelectedItem(matchingItem.id as FilterType);
-      } else {
-        // Fallback to first item if no match
-        setSelectedItem(filterItems[0]?.id as FilterType);
-      }
-    }
-  }, [filterItems, selectedItem, useTimeOfDayDefault, setSelectedItem, mealTimes]);
-
   const onPressItem = async (id: FilterType) => {
     setSelectedItem(id as FilterType);
     await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);

hooks/useMenuData.tsx

@@ -6,8 +6,17 @@ import {
   type Location,
 } from '~/services/database/database';
 import { getTodayInCentralTime } from '~/utils/date';
+import { getMealTimes } from '~/utils/locations';
+import { timeOfDay } from '~/utils/time';
 import { useDatabase } from './useDatabase';
 
+// Define the proper meal order
+const MEAL_ORDER = {
+  Breakfast: 1,
+  Lunch: 2,
+  Dinner: 3,
+};
+
 export function useMenuData(location: string, date?: string) {
   const db = useDatabase();
   const queryClient = useQueryClient();
@@ -32,8 +41,43 @@ export function useMenuData(location: string, date?: string) {
     enabled: !!location,
   });
 
-  // Auto-select first menu if none selected
-  const defaultMenu = selectedMenu || menuNames[0];
+  // Smart menu selection logic
+  const defaultMenu = useMemo(() => {
+    // If user has manually selected a menu, use that
+    if (selectedMenu) return selectedMenu;
+
+    // If no menus available, return null
+    if (menuNames.length === 0) return null;
+
+    // If there's only one menu, automatically select it
+    if (menuNames.length === 1) {
+      return menuNames[0];
+    }
+
+    // Use time-of-day logic to determine appropriate menu
+    const mealTimes = getMealTimes(db, location);
+    const tod = mealTimes ? timeOfDay(new Date(), mealTimes) : timeOfDay(new Date());
+    let targetMenu = '';
+
+    if (tod === 'morning') targetMenu = 'Breakfast';
+    else if (tod === 'afternoon') targetMenu = 'Lunch';
+    else if (tod === 'evening') targetMenu = 'Dinner';
+
+    // Find menu with matching title
+    const matchingMenu = menuNames.find((menuName) => menuName === targetMenu);
+
+    if (matchingMenu) {
+      return matchingMenu;
+    } else {
+      // Sort menus by meal order and fallback to first available
+      const sortedMenus = [...menuNames].sort((a, b) => {
+        const orderA = MEAL_ORDER[a as keyof typeof MEAL_ORDER] || 999;
+        const orderB = MEAL_ORDER[b as keyof typeof MEAL_ORDER] || 999;
+        return orderA - orderB;
+      });
+      return sortedMenus[0];
+    }
+  }, [selectedMenu, menuNames, location, db]);
 
   // Prefetch all menu data for instant switching
   useEffect(() => {
@@ -64,11 +108,6 @@ export function useMenuData(location: string, date?: string) {
     enabled: !!location && !!defaultMenu,
   });
 
-  // Reset selected menu when date changes
-  useEffect(() => {
-    setSelectedMenu(null);
-  }, []);
-
   // Track menu switching state
   useEffect(() => {
     if (defaultMenu && prevSelectedMenuRef.current !== defaultMenu) {