fix(mobile): Fix bookmarkview page on android not showing bookmark actions. Fixes #603

3 files changed, 36 insertions, 9 deletions

diff --git a/apps/mobile/app.json b/apps/mobile/app.json
index 1aebf2c0..bd3e62d1 100644
--- a/apps/mobile/app.json
+++ b/apps/mobile/app.json
@@ -3,7 +3,7 @@
     "name": "Hoarder App",
     "slug": "hoarder",
     "scheme": "hoarder",
-    "version": "1.6.5",
+    "version": "1.6.6",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",
@@ -30,7 +30,7 @@
           "NSAllowsLocalNetworking": true
         }
       },
-      "buildNumber": "14"
+      "buildNumber": "15"
     },
     "android": {
       "adaptiveIcon": {
@@ -48,7 +48,7 @@
         }
       },
       "package": "app.hoarder.hoardermobile",
-      "versionCode": 14
+      "versionCode": 15
     },
     "plugins": [
       "expo-router",
diff --git a/apps/mobile/app/dashboard/bookmarks/[slug].tsx b/apps/mobile/app/dashboard/bookmarks/[slug].tsx
index bb6570a7..9459488a 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug].tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug].tsx
@@ -15,6 +15,7 @@ import BookmarkTextMarkdown from "@/components/bookmarks/BookmarkTextMarkdown";
 import ListPickerModal from "@/components/bookmarks/ListPickerModal";
 import ViewBookmarkModal from "@/components/bookmarks/ViewBookmarkModal";
 import FullPageError from "@/components/FullPageError";
+import { TailwindResolver } from "@/components/TailwindResolver";
 import { Button } from "@/components/ui/Button";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
@@ -72,31 +73,54 @@ function BottomActions({ bookmark }: { bookmark: ZBookmark }) {
         },
       ],
     );
+
   const actions = [
     {
       id: "lists",
-      icon: <ClipboardList />,
+      icon: (
+        <TailwindResolver
+          className="text-foreground"
+          comp={(styles) => <ClipboardList color={styles?.color?.toString()} />}
+        />
+      ),
       shouldRender: true,
       onClick: () => manageListsSheetRef.current?.present(),
       disabled: false,
     },
     {
       id: "open",
-      icon: <ArrowUpFromLine />,
+      icon: (
+        <TailwindResolver
+          className="text-foreground"
+          comp={(styles) => (
+            <ArrowUpFromLine color={styles?.color?.toString()} />
+          )}
+        />
+      ),
       shouldRender: true,
       onClick: () => viewBookmarkModal.current?.present(),
       disabled: false,
     },
     {
       id: "delete",
-      icon: <Trash2 />,
+      icon: (
+        <TailwindResolver
+          className="text-foreground"
+          comp={(styles) => <Trash2 color={styles?.color?.toString()} />}
+        />
+      ),
       shouldRender: true,
       onClick: deleteBookmarkAlert,
       disabled: isDeletionPending,
     },
     {
       id: "browser",
-      icon: <Globe />,
+      icon: (
+        <TailwindResolver
+          className="text-foreground"
+          comp={(styles) => <Globe color={styles?.color?.toString()} />}
+        />
+      ),
       shouldRender: bookmark.content.type == BookmarkTypes.LINK,
       onClick: () =>
         bookmark.content.type == BookmarkTypes.LINK &&
@@ -276,7 +300,7 @@ export default function ListView() {
       break;
   }
   return (
-    <CustomSafeAreaView>
+    <CustomSafeAreaView edges={["bottom"]}>
       <Stack.Screen
         options={{
           headerTitle: title ?? "",
diff --git a/apps/mobile/components/ui/CustomSafeAreaView.tsx b/apps/mobile/components/ui/CustomSafeAreaView.tsx
index c97dfe72..fdf6520d 100644
--- a/apps/mobile/components/ui/CustomSafeAreaView.tsx
+++ b/apps/mobile/components/ui/CustomSafeAreaView.tsx
@@ -4,8 +4,10 @@ import { useHeaderHeight } from "@react-navigation/elements";
 
 export default function CustomSafeAreaView({
   children,
+  edges = ["top", "bottom"],
 }: {
   children: React.ReactNode;
+  edges?: ("top" | "bottom")[];
 }) {
   const insets = useSafeAreaInsets();
   const headerHeight = useHeaderHeight();
@@ -15,11 +17,12 @@ export default function CustomSafeAreaView({
       style={{
         paddingTop:
           // Some ugly hacks to make the app look the same on both android and ios
-          Platform.OS == "android"
+          Platform.OS == "android" && edges.includes("top")
             ? headerHeight > 0
               ? headerHeight
               : insets.top
             : undefined,
+        paddingBottom: edges.includes("bottom") ? insets.bottom : undefined,
       }}
     >
       {children}