Implement coderabbit fixes and search ui

app/(tabs)/_layout.tsx

@@ -1,31 +1,35 @@
 import { Tabs } from "expo-router";
+import { View } from "react-native";
 
 import { BottomTabBar } from "@/components/bottom-tab-bar";
+import { SearchOverlay } from "@/components/search/search-overlay";
 
 export default function TabsLayout() {
   return (
-    <Tabs
-      tabBar={(props) => <BottomTabBar {...props} />}
-      screenOptions={{
-        headerShown: false,
-        safeAreaInsets: { bottom: 0 },
-        tabBarStyle: {
-          position: "absolute",
-          left: 0,
-          right: 0,
-          bottom: 0,
-          backgroundColor: "transparent",
-          borderTopWidth: 0,
-          elevation: 0,
-          shadowOpacity: 0,
-        },
-      }}
-    >
-      <Tabs.Screen name="index" options={{ title: "Home" }} />
-      <Tabs.Screen name="explore" options={{ title: "Explore" }} />
-      <Tabs.Screen name="map" options={{ title: "Map" }} />
-      <Tabs.Screen name="saved" options={{ title: "Saved" }} />
-      <Tabs.Screen name="profile" options={{ title: "Profile" }} />
-    </Tabs>
+    <View style={{ flex: 1 }}>
+      <Tabs
+        tabBar={(props) => <BottomTabBar {...props} />}
+        screenOptions={{
+          headerShown: false,
+          tabBarStyle: {
+            position: "absolute",
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "transparent",
+            borderTopWidth: 0,
+            elevation: 0,
+            shadowOpacity: 0,
+          },
+        }}
+      >
+        <Tabs.Screen name="index" options={{ title: "Home" }} />
+        <Tabs.Screen name="explore" options={{ title: "Explore" }} />
+        <Tabs.Screen name="map" options={{ title: "Map" }} />
+        <Tabs.Screen name="saved" options={{ title: "Saved" }} />
+        <Tabs.Screen name="profile" options={{ title: "Profile" }} />
+      </Tabs>
+      <SearchOverlay />
+    </View>
   );
 }

app/(tabs)/explore.tsx

@@ -9,20 +9,24 @@ import { useCountryFeedStore } from "@/store/use-country-feed-store";
 
 export default function ExploreScreen() {
   const countries = useCountryFeedStore((s) => s.countries);
+  const selectedRegion = useCountryFeedStore((s) => s.selectedRegion);
   const status = useCountryFeedStore((s) => s.status);
   const error = useCountryFeedStore((s) => s.error);
   const loadInitialFeed = useCountryFeedStore((s) => s.loadInitialFeed);
 
   useEffect(() => {
-    if (countries.length === 0 && status === "idle") {
+    if (countries.length === 0 && status === "idle" && selectedRegion === null) {
       void loadInitialFeed();
     }
-  }, [countries.length, status, loadInitialFeed]);
+  }, [countries.length, selectedRegion, status, loadInitialFeed]);
 
   const showInitialLoading =
+    selectedRegion === null &&
     countries.length === 0 &&
     (status === "loading" || status === "idle" || status === "loadingMore");
-  const showError = countries.length === 0 && status === "error";
+  const showError =
+    selectedRegion === null && countries.length === 0 && status === "error";
+  const showFeed = countries.length > 0 || selectedRegion !== null;
 
   return (
     <View className="flex-1 bg-midnight-navy">
@@ -37,7 +41,7 @@ export default function ExploreScreen() {
         />
       ) : showInitialLoading ? (
         <ExploreLoading />
-      ) : countries.length > 0 ? (
+      ) : showFeed ? (
         <ExploreFeed />
       ) : (
         <ExploreLoading />

app/(tabs)/index.tsx

@@ -1,16 +1,85 @@
-import { ScrollView, Text, View } from "react-native";
+import { StatusBar } from "expo-status-bar";
+import { useEffect } from "react";
+import { ScrollView, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+import { CountryOfTheDayCard } from "@/components/home/country-of-the-day-card";
+import { FeedErrorBanner } from "@/components/home/feed-error-banner";
+import { HomeSearchBar } from "@/components/home/home-search-bar";
+import { HomeStatsRow } from "@/components/home/home-stats-row";
+import { RecentlyViewedSection } from "@/components/home/recently-viewed-section";
+import { TrendingCountriesSection } from "@/components/home/trending-countries-section";
+import { useCountryFeedStore } from "@/store/use-country-feed-store";
+import { useRecentlyViewedStore } from "@/store/use-recently-viewed-store";
 
 export default function HomeScreen() {
+  const countries = useCountryFeedStore((s) => s.countries);
+  const status = useCountryFeedStore((s) => s.status);
+  const error = useCountryFeedStore((s) => s.error);
+  const loadInitialFeed = useCountryFeedStore((s) => s.loadInitialFeed);
+
+  const recentlyViewed = useRecentlyViewedStore((s) => s.entries ?? []);
+  const seedIfEmpty = useRecentlyViewedStore((s) => s.seedIfEmpty);
+
+  useEffect(() => {
+    if (countries.length === 0 && status === "idle") {
+      void loadInitialFeed();
+    }
+  }, [countries.length, status, loadInitialFeed]);
+
+  useEffect(() => {
+    const finishHydration = useRecentlyViewedStore.persist.onFinishHydration(
+      () => {
+        seedIfEmpty();
+      },
+    );
+    if (useRecentlyViewedStore.persist.hasHydrated()) {
+      seedIfEmpty();
+    }
+    return finishHydration;
+  }, [seedIfEmpty]);
+
+  const isLoading = status === "loading" && countries.length === 0;
+  const showError = status === "error" && countries.length === 0;
+
+  const featuredCountry = countries[0];
+  const trendingCountries = countries.slice(1, 5);
+
   return (
-    <ScrollView
-      className="flex-1 bg-background"
-      contentContainerClassName="grow px-6 py-8 pb-28"
-      contentInsetAdjustmentBehavior="automatic"
-    >
-      <View className="gap-2">
-        <Text className="h2">Home</Text>
-        <Text className="body-md">Coming in a later lesson</Text>
-      </View>
-    </ScrollView>
+    <SafeAreaView style={{ flex: 1, backgroundColor: "#121212" }}>
+      <StatusBar style="light" />
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          paddingHorizontal: 16,
+          paddingTop: 8,
+          paddingBottom: 112,
+          gap: 24,
+        }}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* <HomeHeader /> */}
+        <HomeSearchBar />
+
+        {showError ? (
+          <FeedErrorBanner
+            message={error}
+            onRetry={() => {
+              void loadInitialFeed();
+            }}
+          />
+        ) : null}
+
+        <View className="gap-6">
+          <CountryOfTheDayCard country={featuredCountry} loading={isLoading} />
+          <TrendingCountriesSection
+            countries={trendingCountries}
+            loading={isLoading}
+          />
+          <HomeStatsRow />
+          <RecentlyViewedSection entries={recentlyViewed} />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   );
 }