mobile(android): Getting the android app ready for submission

18 files changed, 92 insertions, 43 deletions

diff --git a/apps/mobile/app.json b/apps/mobile/app.json
index a857022c..1e9d1e34 100644
--- a/apps/mobile/app.json
+++ b/apps/mobile/app.json
@@ -22,8 +22,8 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/icon.png",
-        "backgroundColor": "#ffffff"
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#000000"
       },
       "package": "app.hoarder.hoardermobile"
     },
@@ -38,7 +38,11 @@
             "NSExtensionActivationSupportsImageWithMaxCount": 1,
             "NSExtensionActivationSupportsMovieWithMaxCount": 0,
             "NSExtensionActivationSupportsText": true
-          }
+          },
+          "androidIntentFilters": [
+            "text/*",
+            "image/*"
+          ]
         }
       ],
       "expo-secure-store",
diff --git a/apps/mobile/app/_layout.tsx b/apps/mobile/app/_layout.tsx
index 9f8f8ad5..f36c9eec 100644
--- a/apps/mobile/app/_layout.tsx
+++ b/apps/mobile/app/_layout.tsx
@@ -24,7 +24,7 @@ export default function RootLayout() {
   return (
     <ShareIntentProvider>
       <Providers>
-        <View className="h-full w-full bg-white">
+        <View className="w-full flex-1 bg-background">
           <Stack
             screenOptions={{
               headerShown: false,
diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
index ac1a7e2b..fe40215e 100644
--- a/apps/mobile/app/dashboard/(tabs)/_layout.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -1,8 +1,15 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Tabs } from "expo-router";
 import { ClipboardList, Home, Search, Settings } from "lucide-react-native";
+import { Platform } from "react-native";
+import * as NavigationBar from 'expo-navigation-bar';
 
 export default function TabLayout() {
+  useEffect(() => {
+    if (Platform.OS == "android") {
+      NavigationBar.setBackgroundColorAsync("white");
+    }
+  }, []);
   return (
     <Tabs
       screenOptions={{
diff --git a/apps/mobile/app/dashboard/(tabs)/index.tsx b/apps/mobile/app/dashboard/(tabs)/index.tsx
index 18fb804d..804eb0b5 100644
--- a/apps/mobile/app/dashboard/(tabs)/index.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/index.tsx
@@ -1,4 +1,4 @@
-import { Platform, SafeAreaView, View } from "react-native";
+import { Platform, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import * as ImagePicker from "expo-image-picker";
 import { useRouter } from "expo-router";
@@ -9,6 +9,7 @@ import { useUploadAsset } from "@/lib/upload";
 import { MenuView } from "@react-native-menu/menu";
 import { SquarePen } from "lucide-react-native";
 import { useToast } from "@/components/ui/Toast";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 function HeaderRight() {
   const {toast} = useToast();
@@ -48,7 +49,6 @@ function HeaderRight() {
           title: "New Link",
           image: Platform.select({
             ios: "link",
-            android: "ic_menu_link",
           }),
         },
         {
@@ -56,7 +56,6 @@ function HeaderRight() {
           title: "New Note",
           image: Platform.select({
             ios: "note.text",
-            android: "ic_menu_note",
           }),
         },
         {
@@ -64,14 +63,13 @@ function HeaderRight() {
           title: "Photo Library",
           image: Platform.select({
             ios: "photo",
-            android: "ic_menu_photo",
           }),
         },
       ]}
       shouldOpenOnLongPress={false}
     >
       <View className="my-auto px-4">
-        <SquarePen onPress={() => Haptics.selectionAsync()} />
+        <SquarePen color="rgb(0, 122, 255)" onPress={() => Haptics.selectionAsync()} />
       </View>
     </MenuView>
   );
@@ -79,7 +77,7 @@ function HeaderRight() {
 
 export default function Home() {
   return (
-    <SafeAreaView>
+    <CustomSafeAreaView>
       <UpdatingBookmarkList
         query={{ archived: false }}
         header={
@@ -89,6 +87,6 @@ export default function Home() {
           </View>
         }
       />
-    </SafeAreaView>
+    </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
index e0ed8489..0350ebd2 100644
--- a/apps/mobile/app/dashboard/(tabs)/lists.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react";
-import { FlatList, Pressable, SafeAreaView, Text, View } from "react-native";
+import { FlatList, Pressable, Text, View } from "react-native";
 import { Link } from "expo-router";
 import { api } from "@/lib/trpc";
 import { ChevronRight } from "lucide-react-native";
 import PageTitle from "@/components/ui/PageTitle";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 export default function Lists() {
   const [refreshing, setRefreshing] = useState(false);
@@ -48,7 +49,7 @@ export default function Lists() {
   );
 
   return (
-    <SafeAreaView>
+    <CustomSafeAreaView>
       <FlatList
         ListHeaderComponent={
           <PageTitle title="Lists" />
@@ -62,7 +63,7 @@ export default function Lists() {
               <Text className="text-lg">
                 {l.item.logo} {l.item.name}
               </Text>
-              <ChevronRight />
+              <ChevronRight color="rgb(0, 122, 255)" />
             </Pressable>
           </Link>
         )}
@@ -70,6 +71,6 @@ export default function Lists() {
         refreshing={refreshing}
         onRefresh={onRefresh}
       />
-    </SafeAreaView>
+    </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/(tabs)/search.tsx b/apps/mobile/app/dashboard/(tabs)/search.tsx
index c1bb178b..bcaee5af 100644
--- a/apps/mobile/app/dashboard/(tabs)/search.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/search.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { SafeAreaView, View } from "react-native";
+import { View } from "react-native";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { Input } from "@/components/ui/Input";
@@ -7,6 +7,7 @@ import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useDebounce } from "use-debounce";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 export default function Search() {
   const [search, setSearch] = useState("");
@@ -25,7 +26,7 @@ export default function Search() {
   }
 
   return (
-    <SafeAreaView>
+    <CustomSafeAreaView>
       <BookmarkList
         bookmarks={data.bookmarks}
         header={
@@ -44,6 +45,6 @@ export default function Search() {
         onRefresh={onRefresh}
         isRefreshing={isPending}
       />
-    </SafeAreaView>
+    </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx
index f60c2495..0dbf7da6 100644
--- a/apps/mobile/app/dashboard/(tabs)/settings.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx
@@ -1,8 +1,9 @@
-import { SafeAreaView, Text, View } from "react-native";
+import { Text, View } from "react-native";
 import { Button } from "@/components/ui/Button";
 import PageTitle from "@/components/ui/PageTitle";
 import { useSession } from "@/lib/session";
 import { api } from "@/lib/trpc";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 export default function Dashboard() {
   const { logout } = useSession();
@@ -14,7 +15,7 @@ export default function Dashboard() {
   }
 
   return (
-    <SafeAreaView>
+    <CustomSafeAreaView>
       <PageTitle title="Settings" />
       <View className="flex h-full w-full items-center gap-4 px-4 py-2">
         <View className="w-full rounded-lg bg-white px-4 py-2">
@@ -25,6 +26,6 @@ export default function Dashboard() {
 
         <Button className="w-full" label="Log Out" onPress={logout} />
       </View>
-    </SafeAreaView>
+    </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/_layout.tsx b/apps/mobile/app/dashboard/_layout.tsx
index ef04fcd1..f1bb66d7 100644
--- a/apps/mobile/app/dashboard/_layout.tsx
+++ b/apps/mobile/app/dashboard/_layout.tsx
@@ -1,7 +1,7 @@
-import { useIsLoggedIn } from "@/lib/session";
+import { useEffect } from "react";
 import { useRouter } from "expo-router";
 import { Stack } from "expo-router/stack";
-import { useEffect } from "react";
+import { useIsLoggedIn } from "@/lib/session";
 
 export default function Dashboard() {
   const router = useRouter();
diff --git a/apps/mobile/app/dashboard/archive.tsx b/apps/mobile/app/dashboard/archive.tsx
index 93841b9d..e622a3e4 100644
--- a/apps/mobile/app/dashboard/archive.tsx
+++ b/apps/mobile/app/dashboard/archive.tsx
@@ -1,11 +1,11 @@
-import { SafeAreaView } from "react-native";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import PageTitle from "@/components/ui/PageTitle";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 export default function Archive() {
   return (
-    <SafeAreaView>
+    <CustomSafeAreaView>
       <UpdatingBookmarkList query={{archived: true}} header={<PageTitle title="🗄️ Archive" />} />
-    </SafeAreaView>
+    </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/favourites.tsx b/apps/mobile/app/dashboard/favourites.tsx
index aebf3885..213cc918 100644
--- a/apps/mobile/app/dashboard/favourites.tsx
+++ b/apps/mobile/app/dashboard/favourites.tsx
@@ -1,10 +1,10 @@
-import { SafeAreaView } from "react-native";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import PageTitle from "@/components/ui/PageTitle";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 export default function Favourites() {
   return (
-    <SafeAreaView>
+    <CustomSafeAreaView>
       <UpdatingBookmarkList
         query={{
           archived: false,
@@ -12,6 +12,6 @@ export default function Favourites() {
         }}
         header={<PageTitle title="⭐️ Favourites" />}
       />
-    </SafeAreaView>
+    </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/lists/[slug].tsx b/apps/mobile/app/dashboard/lists/[slug].tsx
index 2bb5d602..c0b86a0f 100644
--- a/apps/mobile/app/dashboard/lists/[slug].tsx
+++ b/apps/mobile/app/dashboard/lists/[slug].tsx
@@ -1,9 +1,10 @@
-import { SafeAreaView, View } from "react-native";
+import { View } from "react-native";
 import { Stack, useLocalSearchParams } from "expo-router";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 export default function ListView() {
   const { slug } = useLocalSearchParams();
@@ -13,7 +14,7 @@ export default function ListView() {
   const { data: list } = api.lists.get.useQuery({ listId: slug });
 
   return (
-    <SafeAreaView>
+    <CustomSafeAreaView>
       <Stack.Screen
         options={{
           headerTitle: "",
@@ -34,6 +35,6 @@ export default function ListView() {
       ) : (
         <FullPageSpinner />
       )}
-    </SafeAreaView>
+    </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/tags/[slug].tsx b/apps/mobile/app/dashboard/tags/[slug].tsx
index 52c06129..26aa47ec 100644
--- a/apps/mobile/app/dashboard/tags/[slug].tsx
+++ b/apps/mobile/app/dashboard/tags/[slug].tsx
@@ -1,9 +1,10 @@
-import { SafeAreaView, View } from "react-native";
+import { View } from "react-native";
 import { Stack, useLocalSearchParams } from "expo-router";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 
 export default function TagView() {
   const { slug } = useLocalSearchParams();
@@ -14,7 +15,7 @@ export default function TagView() {
   const { data: tag } = api.tags.get.useQuery({ tagId: slug });
 
   return (
-    <SafeAreaView>
+    <CustomSafeAreaView>
       <Stack.Screen
         options={{
           headerTitle: "",
@@ -35,6 +36,6 @@ export default function TagView() {
       ) : (
         <FullPageSpinner />
       )}
-    </SafeAreaView>
+    </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/assets/adaptive-icon.png b/apps/mobile/assets/adaptive-icon.png
new file mode 100644
index 00000000..e60f5588
--- /dev/null
+++ b/apps/mobile/assets/adaptive-icon.png
diff --git a/apps/mobile/components/bookmarks/BookmarkCard.tsx b/apps/mobile/components/bookmarks/BookmarkCard.tsx
index ac6eaea4..89ce7924 100644
--- a/apps/mobile/components/bookmarks/BookmarkCard.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkCard.tsx
@@ -63,6 +63,7 @@ function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
           showProgress: false,
         });
         apiUtils.bookmarks.getBookmarks.invalidate();
+        apiUtils.bookmarks.searchBookmarks.invalidate();
       },
       onError,
     });
@@ -85,6 +86,7 @@ function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
         });
         apiUtils.bookmarks.getBookmarks.invalidate();
         apiUtils.bookmarks.getBookmark.invalidate({ bookmarkId: bookmark.id });
+        apiUtils.bookmarks.searchBookmarks.invalidate();
       },
       onError,
     });
@@ -128,7 +130,6 @@ function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
             title: bookmark.archived ? "Un-archive" : "Archive",
             image: Platform.select({
               ios: "folder",
-              android: "ic_menu_folder",
             }),
           },
           {
@@ -139,7 +140,6 @@ function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
             },
             image: Platform.select({
               ios: "trash",
-              android: "ic_menu_delete",
             }),
           },
         ]}
diff --git a/apps/mobile/components/ui/CustomSafeAreaView.tsx b/apps/mobile/components/ui/CustomSafeAreaView.tsx
new file mode 100644
index 00000000..c97dfe72
--- /dev/null
+++ b/apps/mobile/components/ui/CustomSafeAreaView.tsx
@@ -0,0 +1,28 @@
+import { Platform, SafeAreaView } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useHeaderHeight } from "@react-navigation/elements";
+
+export default function CustomSafeAreaView({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const insets = useSafeAreaInsets();
+  const headerHeight = useHeaderHeight();
+
+  return (
+    <SafeAreaView
+      style={{
+        paddingTop:
+          // Some ugly hacks to make the app look the same on both android and ios
+          Platform.OS == "android"
+            ? headerHeight > 0
+              ? headerHeight
+              : insets.top
+            : undefined,
+      }}
+    >
+      {children}
+    </SafeAreaView>
+  );
+}
diff --git a/apps/mobile/index.ts b/apps/mobile/index.ts
new file mode 100644
index 00000000..5b834183
--- /dev/null
+++ b/apps/mobile/index.ts
@@ -0,0 +1 @@
+import 'expo-router/entry';
diff --git a/apps/mobile/lib/providers.tsx b/apps/mobile/lib/providers.tsx
index 688ecd5d..ed04b9bf 100644
--- a/apps/mobile/lib/providers.tsx
+++ b/apps/mobile/lib/providers.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useMemo } from "react";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { ToastProvider } from "@/components/ui/Toast";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -60,8 +61,10 @@ export function Providers({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <TrpcProvider settings={settings}>
-      <ToastProvider>{children}</ToastProvider>
-    </TrpcProvider>
+    <SafeAreaProvider>
+      <TrpcProvider settings={settings}>
+        <ToastProvider>{children}</ToastProvider>
+      </TrpcProvider>
+    </SafeAreaProvider>
   );
 }
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 7c14f5fe..15b2057b 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@hoarder/mobile",
   "version": "1.0.0",
-  "main": "expo-router/entry",
+  "main": "index.ts",
   "scripts": {
     "clean": "git clean -xdf .expo .turbo node_modules",
     "start": "expo start",
@@ -25,6 +25,7 @@
     "expo-image": "^1.10.6",
     "expo-image-picker": "^14.7.1",
     "expo-linking": "~6.2.2",
+    "expo-navigation-bar": "~2.8.1",
     "expo-router": "~3.4.8",
     "expo-secure-store": "^12.8.1",
     "expo-share-intent": "^1.1.0",
@@ -67,7 +68,9 @@
       "@hoarder/eslint-config/react"
     ],
     "ignorePatterns": [
-      "expo-plugins/**"
+      "expo-plugins/**",
+      "ios/**",
+      "android/**"
     ]
   },
   "prettier": "@hoarder/prettier-config"