feat: restructure internal tab stuff to make more sense

apps/expo/src/app/(tabs)/_layout.tsx

@@ -9,7 +9,7 @@ import Colors from "@movie-web/tailwind-config/colors";
 import { MovieWebSvg } from "~/components/Icon";
 import SvgTabBarIcon from "~/components/SvgTabBarIcon";
 import TabBarIcon from "~/components/TabBarIcon";
-import SearchTabContext from "./search/SearchTabContext";
+import SearchTabContext from "../../components/ui/SearchTabContext";
 
 export default function TabLayout() {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -79,7 +79,7 @@ export default function TabLayout() {
         <Tabs.Screen
           name="search"
           options={{
-            title: "Search",
+            title: "Home",
             tabBarLabel: "",
             tabBarIcon: ({ focused }) => (
               <View

apps/expo/src/app/(tabs)/index.tsx

@@ -1,51 +1,7 @@
-import { ScrollView, View } from "react-native";
-import { useSharedValue, withTiming } from "react-native-reanimated";
+import React from "react";
 
-import {
-  bookmarks,
-  ItemListSection,
-  watching,
-} from "~/components/item/ItemListSection";
-import ScreenLayout from "~/components/layout/ScreenLayout";
-import { Text } from "~/components/ui/Text";
+import HomeScreenContent from "~/components/HomeScreenContent";
 
 export default function HomeScreen() {
-  const fadeAnim = useSharedValue(1);
-
-  const handleScrollBegin = () => {
-    fadeAnim.value = withTiming(0, {
-      duration: 100,
-    });
-  };
-
-  const handleScrollEnd = () => {
-    fadeAnim.value = withTiming(1, {
-      duration: 100,
-    });
-  };
-
-  return (
-    <View style={{ flex: 1 }}>
-      <ScrollView
-        onScrollBeginDrag={handleScrollBegin}
-        onMomentumScrollEnd={handleScrollEnd}
-        scrollEnabled={
-          bookmarks.length > 0 || watching.length > 0 ? true : false
-        }
-        keyboardDismissMode="on-drag"
-        keyboardShouldPersistTaps="handled"
-      >
-        <ScreenLayout
-          title={
-            <View className="flex-row items-center">
-              <Text className="text-2xl font-bold">Home</Text>
-            </View>
-          }
-        >
-          <ItemListSection title="Bookmarks" items={bookmarks} />
-          <ItemListSection title="Continue Watching" items={watching} />
-        </ScreenLayout>
-      </ScrollView>
-    </View>
-  );
+  return <HomeScreenContent />;
 }

apps/expo/src/app/(tabs)/search.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import HomeScreenContent from "~/components/HomeScreenContent";
+
+export default function SearchScreen() {
+  return <HomeScreenContent />;
+}

apps/expo/src/components/HomeScreenContent.tsx

@@ -18,10 +18,10 @@ import {
   watching,
 } from "~/components/item/ItemListSection";
 import ScreenLayout from "~/components/layout/ScreenLayout";
+import { SearchBar } from "~/components/ui/Searchbar";
 import { Text } from "~/components/ui/Text";
-import Searchbar from "./Searchbar";
 
-export default function SearchScreen() {
+export default function HomeScreenContent() {
   const [query, setQuery] = useState("");
   const translateY = useSharedValue(0);
   const fadeAnim = useSharedValue(1);
@@ -146,7 +146,7 @@ export default function SearchScreen() {
           animatedStyle,
         ]}
       >
-        <Searchbar onSearchChange={setQuery} />
+        <SearchBar onSearchChange={setQuery} />
       </Animated.View>
     </View>
   );

apps/expo/src/components/ui/Searchbar.tsx

@@ -7,7 +7,7 @@ import Colors from "@movie-web/tailwind-config/colors";
 
 import SearchTabContext from "./SearchTabContext";
 
-export default function Searchbar({
+export function SearchBar({
   onSearchChange,
 }: {
   onSearchChange: (text: string) => void;