1 files changed, 136 insertions, 0 deletions
diff --git a/apps/mobile/components/bookmarks/BottomActions.tsx b/apps/mobile/components/bookmarks/BottomActions.tsx
new file mode 100644
index 00000000..8cfa27c9
--- /dev/null
+++ b/apps/mobile/components/bookmarks/BottomActions.tsx
@@ -0,0 +1,136 @@
+import { Alert, Linking, Pressable, View } from "react-native";
+import { useRouter } from "expo-router";
+import { TailwindResolver } from "@/components/TailwindResolver";
+import { useToast } from "@/components/ui/Toast";
+import { ClipboardList, Globe, Info, Tag, Trash2 } from "lucide-react-native";
+
+import { useDeleteBookmark } from "@karakeep/shared-react/hooks/bookmarks";
+import { BookmarkTypes, ZBookmark } from "@karakeep/shared/types/bookmarks";
+
+interface BottomActionsProps {
+  bookmark: ZBookmark;
+}
+
+export default function BottomActions({ bookmark }: BottomActionsProps) {
+  const { toast } = useToast();
+  const router = useRouter();
+
+  const { mutate: deleteBookmark, isPending: isDeletionPending } =
+    useDeleteBookmark({
+      onSuccess: () => {
+        router.back();
+        toast({
+          message: "The bookmark has been deleted!",
+          showProgress: false,
+        });
+      },
+      onError: () => {
+        toast({
+          message: "Something went wrong",
+          variant: "destructive",
+          showProgress: false,
+        });
+      },
+    });
+
+  const deleteBookmarkAlert = () =>
+    Alert.alert(
+      "Delete bookmark?",
+      "Are you sure you want to delete this bookmark?",
+      [
+        { text: "Cancel", style: "cancel" },
+        {
+          text: "Delete",
+          onPress: () => deleteBookmark({ bookmarkId: bookmark.id }),
+          style: "destructive",
+        },
+      ],
+    );
+
+  const actions = [
+    {
+      id: "lists",
+      icon: (
+        <TailwindResolver
+          className="text-foreground"
+          comp={(styles) => <ClipboardList color={styles?.color?.toString()} />}
+        />
+      ),
+      shouldRender: true,
+      onClick: () =>
+        router.push(`/dashboard/bookmarks/${bookmark.id}/manage_lists`),
+      disabled: false,
+    },
+    {
+      id: "tags",
+      icon: (
+        <TailwindResolver
+          className="text-foreground"
+          comp={(styles) => <Tag color={styles?.color?.toString()} />}
+        />
+      ),
+      shouldRender: true,
+      onClick: () =>
+        router.push(`/dashboard/bookmarks/${bookmark.id}/manage_tags`),
+      disabled: false,
+    },
+    {
+      id: "open",
+      icon: (
+        <TailwindResolver
+          className="text-foreground"
+          comp={(styles) => <Info color={styles?.color?.toString()} />}
+        />
+      ),
+      shouldRender: true,
+      onClick: () => router.push(`/dashboard/bookmarks/${bookmark.id}/info`),
+      disabled: false,
+    },
+    {
+      id: "delete",
+      icon: (
+        <TailwindResolver
+          className="text-foreground"
+          comp={(styles) => <Trash2 color={styles?.color?.toString()} />}
+        />
+      ),
+      shouldRender: true,
+      onClick: deleteBookmarkAlert,
+      disabled: isDeletionPending,
+    },
+    {
+      id: "browser",
+      icon: (
+        <TailwindResolver
+          className="text-foreground"
+          comp={(styles) => <Globe color={styles?.color?.toString()} />}
+        />
+      ),
+      shouldRender: bookmark.content.type == BookmarkTypes.LINK,
+      onClick: () =>
+        bookmark.content.type == BookmarkTypes.LINK &&
+        Linking.openURL(bookmark.content.url),
+      disabled: false,
+    },
+  ];
+
+  return (
+    <View>
+      <View className="flex flex-row items-center justify-between px-10 pb-2 pt-4">
+        {actions.map(
+          (a) =>
+            a.shouldRender && (
+              <Pressable
+                disabled={a.disabled}
+                key={a.id}
+                onPress={a.onClick}
+                className="py-auto"
+              >
+                {a.icon}
+              </Pressable>
+            ),
+        )}
+      </View>
+    </View>
+  );
+}