search input and header fixes and offline maps delete

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/maps/index.tsx

@@ -2,15 +2,17 @@ import { DrawerToggleButton } from '@react-navigation/drawer';
 import useTheme from 'app/hooks/useTheme';
 import { OfflineMapsScreen } from 'app/modules/map/screens/OfflineMapsScreen';
 import { Stack } from 'expo-router';
-import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
 import { useAtom } from 'jotai';
 import Head from 'expo-router/head';
 import React from 'react';
 import { Platform } from 'react-native';
+import { useRouterSettings } from 'app/hooks/router';
+import { searchQueryAtom } from 'app/modules/feed/atoms';
 
 export default function MapsScreen() {
   const { currentTheme } = useTheme();
-  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
+  const { stackScreenOptionsHeaderSettings } = useRouterSettings();
+  const [searchQuery, setSearchQuery] = useAtom(searchQueryAtom);
   return (
     <>
       {Platform.OS === 'web' && (
@@ -26,21 +28,15 @@ export default function MapsScreen() {
             <DrawerToggleButton tintColor={tintColor} />
           ),
           headerSearchBarOptions: {
-            placeholder: 'Search maps',
-            hideWhenScrolling: false,
+            placeholder: 'Search',
             headerIconColor: currentTheme.colors.text,
+            hideWhenScrolling: false,
             inputType: 'text',
             textColor:
               Platform.OS === 'android' ? currentTheme.colors.text : undefined,
             onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
           },
-          headerStyle: {
-            backgroundColor: currentTheme.colors.background,
-          },
-          headerTitleStyle: {
-            fontSize: 20,
-          },
-          headerTintColor: currentTheme.colors.text,
+          ...stackScreenOptionsHeaderSettings,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/products/index.tsx

@@ -1,16 +1,19 @@
 import { DrawerToggleButton } from '@react-navigation/drawer';
 import useTheme from 'app/hooks/useTheme';
 import { ProductsScreen } from 'app/modules/item';
-import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
 import { useAtom } from 'jotai';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 import React from 'react';
 import { Platform } from 'react-native';
+import { useRouterSettings } from 'app/hooks/router';
+import { searchQueryAtom } from 'app/modules/feed/atoms';
 
 export default function ProductsPage() {
   const { currentTheme } = useTheme();
-  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
+  const [searchQuery, setSearchQuery] = useAtom(searchQueryAtom);
+  const { stackScreenOptionsHeaderSettings } = useRouterSettings();
+
   return (
     <>
       {Platform.OS === 'web' && (
@@ -34,14 +37,7 @@ export default function ProductsPage() {
               Platform.OS === 'android' ? currentTheme.colors.text : undefined,
             onChangeText: (e) => setSearchQuery(e.nativeEvent.text),
           },
-
-          headerStyle: {
-            backgroundColor: currentTheme.colors.background,
-          },
-          headerTitleStyle: {
-            fontSize: 20,
-          },
-          headerTintColor: currentTheme.colors.text,
+          ...stackScreenOptionsHeaderSettings,
           // https://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/[id].tsx

@@ -4,11 +4,13 @@ import { useEffect, useState } from 'react';
 import { StyleSheet, Text, View, Platform } from 'react-native';
 import { ProfileScreen, useProfile, useProfileId } from 'app/modules/user';
 import Head from 'expo-router/head';
+import { useRouterSettings } from 'app/hooks/router';
 
 const Profile = () => {
   const [id] = useProfileId();
   const { user } = useProfile(id);
   const userRealName = user?.name ?? null;
+  const { stackScreenOptionsHeaderSettings } = useRouterSettings();
 
   return (
     <>
@@ -21,6 +23,7 @@ const Profile = () => {
       <Stack.Screen
         options={{
           title: userRealName ? `${userRealName}'s Profile` : '',
+          ...stackScreenOptionsHeaderSettings,
         }}
       />
       <ProfileScreen userId={id} />

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/profile/settings/index.tsx

@@ -3,8 +3,11 @@ import { Platform, ScrollView } from 'react-native';
 import { Stack } from 'expo-router';
 import { SettingsScreen } from 'app/modules/user';
 import Head from 'expo-router/head';
+import { useRouterSettings } from 'app/hooks/router';
 
 export default function SettingsPage() {
+  const { stackScreenOptionsHeaderSettings } = useRouterSettings();
+
   return (
     <>
       {Platform.OS === 'web' && (
@@ -16,6 +19,7 @@ export default function SettingsPage() {
         options={{
           // https://reactnavigation.org/docs/headers#setting-the-header-title
           title: 'Settings',
+          ...stackScreenOptionsHeaderSettings,
           // http://reactnavigation.org/docs/headers#adjusting-header-styles
 
           // https://reactnavigation.org/docs/headers#replacing-the-title-with-a-custom-component

apps/expo/app/(app)/(drawer)/(tabs)/(stack)/trips/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import { FeedScreen } from 'app/modules/feed';
-import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
 import { useAtom } from 'jotai';
 import { Platform } from 'react-native';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 import useTheme from 'app/hooks/useTheme';
+import { searchQueryAtom } from 'app/modules/feed/atoms';
 export default function FeedNav() {
   const { currentTheme } = useTheme();
-  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
+  const [searchQuery, setSearchQuery] = useAtom(searchQueryAtom);
 
   return (
     <>

apps/expo/app/(app)/(drawer)/(tabs)/packs/index.tsx

@@ -1,7 +1,7 @@
 import { DrawerToggleButton } from '@react-navigation/drawer';
-import { placesAutocompleteSearchAtom } from 'app/components/PlacesAutocomplete/usePlacesAutoComplete';
 import useTheme from 'app/hooks/useTheme';
 import { FeedScreen } from 'app/modules/feed';
+import { searchQueryAtom } from 'app/modules/feed/atoms';
 import { Stack } from 'expo-router';
 import Head from 'expo-router/head';
 import { useAtom } from 'jotai';
@@ -10,7 +10,7 @@ import { Platform } from 'react-native';
 
 export default function Packs() {
   const { currentTheme } = useTheme();
-  const [searchQuery, setSearchQuery] = useAtom(placesAutocompleteSearchAtom);
+  const [searchQuery, setSearchQuery] = useAtom(searchQueryAtom);
 
   return (
     <>

apps/expo/app/(app)/(drawer)/(tabs)/profile/_layout.tsx

@@ -6,14 +6,17 @@ import useTheme from 'app/hooks/useTheme';
 
 export default function StackLayout() {
   const { currentTheme } = useTheme();
+  const { layoutStackScreenOptionsHeaderSettings } = useRouterSettings();
+
   return (
     <Stack
       screenOptions={{
         headerRight: () => (
           <DrawerToggleButton tintColor={currentTheme.colors.text} />
         ),
-        headerBlurEffect: 'systemChromeMaterial',
+        ...layoutStackScreenOptionsHeaderSettings,
         title: 'Profile',
+        headerBlurEffect: 'systemChromeMaterial',
       }}
     />
   );

apps/vite/src/routeTree.gen.ts

@@ -1,12 +1,12 @@
-/* prettier-ignore-start */
-
 /* eslint-disable */
 
 // @ts-nocheck
 
 // noinspection JSUnusedGlobalSymbols
 
-// This file is auto-generated by TanStack Router
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { createFileRoute } from '@tanstack/react-router'
 
@@ -46,147 +46,173 @@ const ProfileSettingsIndexLazyImport = createFileRoute('/profile/settings/')()
 // Create/Update Routes
 
 const IndexRoute = IndexImport.update({
+  id: '/',
   path: '/',
   getParentRoute: () => rootRoute,
 } as any)
 
 const TripsIndexLazyRoute = TripsIndexLazyImport.update({
+  id: '/trips/',
   path: '/trips/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/trips/index.lazy').then((d) => d.Route))
 
 const SignInIndexLazyRoute = SignInIndexLazyImport.update({
+  id: '/sign-in/',
   path: '/sign-in/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/sign-in/index.lazy').then((d) => d.Route))
 
 const RegisterIndexLazyRoute = RegisterIndexLazyImport.update({
+  id: '/register/',
   path: '/register/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
   import('./routes/register/index.lazy').then((d) => d.Route),
 )
 
 const ProfileIndexLazyRoute = ProfileIndexLazyImport.update({
+  id: '/profile/',
   path: '/profile/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/profile/index.lazy').then((d) => d.Route))
 
 const ProductsIndexLazyRoute = ProductsIndexLazyImport.update({
+  id: '/products/',
   path: '/products/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
   import('./routes/products/index.lazy').then((d) => d.Route),
 )
 
 const PrivacyIndexLazyRoute = PrivacyIndexLazyImport.update({
+  id: '/privacy/',
   path: '/privacy/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/privacy/index.lazy').then((d) => d.Route))
 
 const PasswordResetIndexLazyRoute = PasswordResetIndexLazyImport.update({
+  id: '/password-reset/',
   path: '/password-reset/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
   import('./routes/password-reset/index.lazy').then((d) => d.Route),
 )
 
 const PacksIndexLazyRoute = PacksIndexLazyImport.update({
+  id: '/packs/',
   path: '/packs/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/packs/index.lazy').then((d) => d.Route))
 
 const PackTemplatesIndexLazyRoute = PackTemplatesIndexLazyImport.update({
+  id: '/pack-templates/',
   path: '/pack-templates/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
   import('./routes/pack-templates/index.lazy').then((d) => d.Route),
 )
 
 const MapsIndexLazyRoute = MapsIndexLazyImport.update({
+  id: '/maps/',
   path: '/maps/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/maps/index.lazy').then((d) => d.Route))
 
 const MapIndexLazyRoute = MapIndexLazyImport.update({
+  id: '/map/',
   path: '/map/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/map/index.lazy').then((d) => d.Route))
 
 const ItemsIndexLazyRoute = ItemsIndexLazyImport.update({
+  id: '/items/',
   path: '/items/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/items/index.lazy').then((d) => d.Route))
 
 const FeedIndexLazyRoute = FeedIndexLazyImport.update({
+  id: '/feed/',
   path: '/feed/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/feed/index.lazy').then((d) => d.Route))
 
 const DashboardIndexLazyRoute = DashboardIndexLazyImport.update({
+  id: '/dashboard/',
   path: '/dashboard/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
   import('./routes/dashboard/index.lazy').then((d) => d.Route),
 )
 
 const AppearanceIndexLazyRoute = AppearanceIndexLazyImport.update({
+  id: '/appearance/',
   path: '/appearance/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
   import('./routes/appearance/index.lazy').then((d) => d.Route),
 )
 
 const AboutIndexLazyRoute = AboutIndexLazyImport.update({
+  id: '/about/',
   path: '/about/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/about/index.lazy').then((d) => d.Route))
 
 const TripCreateLazyRoute = TripCreateLazyImport.update({
+  id: '/trip/create',
   path: '/trip/create',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/trip/create.lazy').then((d) => d.Route))
 
 const TripTripIdLazyRoute = TripTripIdLazyImport.update({
+  id: '/trip/$tripId',
   path: '/trip/$tripId',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/trip/$tripId.lazy').then((d) => d.Route))
 
 const ProfileIdLazyRoute = ProfileIdLazyImport.update({
+  id: '/profile/$id',
   path: '/profile/$id',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/profile/$id.lazy').then((d) => d.Route))
 
 const PackCreateLazyRoute = PackCreateLazyImport.update({
+  id: '/pack/create',
   path: '/pack/create',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/pack/create.lazy').then((d) => d.Route))
 
 const PackIdLazyRoute = PackIdLazyImport.update({
+  id: '/pack/$id',
   path: '/pack/$id',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/pack/$id.lazy').then((d) => d.Route))
 
 const PackTemplatesIdLazyRoute = PackTemplatesIdLazyImport.update({
+  id: '/pack-templates/$id',
   path: '/pack-templates/$id',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
   import('./routes/pack-templates/$id.lazy').then((d) => d.Route),
 )
 
 const ItemItemIdLazyRoute = ItemItemIdLazyImport.update({
+  id: '/item/$itemId',
   path: '/item/$itemId',
   getParentRoute: () => rootRoute,
 } as any).lazy(() => import('./routes/item/$itemId.lazy').then((d) => d.Route))
 
 const DestinationQueryLazyRoute = DestinationQueryLazyImport.update({
+  id: '/destination/query',
   path: '/destination/query',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
   import('./routes/destination/query.lazy').then((d) => d.Route),
 )
 
 const ProfileSettingsIndexLazyRoute = ProfileSettingsIndexLazyImport.update({
+  id: '/profile/settings/',
   path: '/profile/settings/',
   getParentRoute: () => rootRoute,
 } as any).lazy(() =>
@@ -622,8 +648,6 @@ export const routeTree = rootRoute
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
 
-/* prettier-ignore-end */
-
 /* ROUTE_MANIFEST_START
 {
   "routes": {

packages/app/components/layout/Layout.tsx

@@ -26,7 +26,7 @@ const Layout: React.FC<LayoutProps> = ({
         margin="auto"
         alignItems="center"
         justifyContent="flex-start"
-        paddingTop={Platform.OS === 'web' ? 20 : '$1'}
+        paddingTop={Platform.OS === 'web' ? 20 : '$4'}
         paddingBottom={Platform.OS !== 'web' ? 44 : undefined}
         paddingHorizontal="$4"
         marginBottom={Platform.OS === 'web' ? 20 : '$1'}

packages/app/constants/api.ts

@@ -9,5 +9,8 @@ import { Platform } from 'react-native';
  */
 
 // use this for android emulator
-// export const api = Platform.OS === 'web' ? API_URL : 'http://10.0.2.2:8787/api';
-export const api = API_URL;
+export const api =
+  Platform.OS === 'web'
+    ? API_URL
+    : 'https://6916-5-77-200-104.ngrok-free.app/api';
+// export const api = API_URL;