8 files changed, 112 insertions, 26 deletions
diff --git a/packages/mobile/app/[bookmark]/[slug].tsx b/packages/mobile/app/[bookmark]/[slug].tsx
deleted file mode 100644
index 2ca88701..00000000
--- a/packages/mobile/app/[bookmark]/[slug].tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { View, Text } from "react-native";
-
-export default function Bookmark() {
-  return (
-    <View className="flex-1 items-center justify-center gap-4">
-      <Text className="text-4xl">Hoarded!</Text>
-    </View>
-  );
-}
diff --git a/packages/mobile/app/_layout.tsx b/packages/mobile/app/_layout.tsx
index bd269060..e8244867 100644
--- a/packages/mobile/app/_layout.tsx
+++ b/packages/mobile/app/_layout.tsx
@@ -1,11 +1,12 @@
 import "@/globals.css";
 import "expo-dev-client";
 
-import { Slot, useRouter } from "expo-router";
+import { useRouter } from "expo-router";
 import { useShareIntent } from "expo-share-intent";
 import { StatusBar } from "expo-status-bar";
 import { useEffect } from "react";
 import { View } from "react-native";
+import { Stack } from "expo-router/stack";
 
 import { Providers } from "@/lib/providers";
 
@@ -22,10 +23,22 @@ export default function RootLayout() {
       resetShareIntent();
     }
   }, [hasShareIntent]);
+
   return (
     <Providers>
       <View className="h-full w-full bg-white">
-        <Slot />
+        <Stack
+          screenOptions={{
+            headerShown: false,
+          }}
+        >
+          <Stack.Screen
+            name="sharing"
+            options={{
+              presentation: "modal",
+            }}
+          />
+        </Stack>
         <StatusBar style="auto" />
       </View>
     </Providers>
diff --git a/packages/mobile/app/dashboard/(tabs)/_layout.tsx b/packages/mobile/app/dashboard/(tabs)/_layout.tsx
new file mode 100644
index 00000000..49d95b35
--- /dev/null
+++ b/packages/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { Tabs } from "expo-router";
+import { Home, Settings } from "lucide-react-native";
+
+export default function TabLayout() {
+  return (
+    <Tabs screenOptions={{ tabBarActiveTintColor: "blue" }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ color }) => <Home color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+          tabBarIcon: ({ color }) => <Settings color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}
diff --git a/packages/mobile/app/dashboard/(tabs)/index.tsx b/packages/mobile/app/dashboard/(tabs)/index.tsx
new file mode 100644
index 00000000..d043a9c4
--- /dev/null
+++ b/packages/mobile/app/dashboard/(tabs)/index.tsx
@@ -0,0 +1,8 @@
+import { View } from "react-native";
+
+export default function Home() {
+  return (
+    <View className="flex h-full items-center justify-center gap-4 px-4">
+    </View>
+  );
+}
diff --git a/packages/mobile/app/dashboard.tsx b/packages/mobile/app/dashboard/(tabs)/settings.tsx
index b4f535c5..b4f535c5 100644
--- a/packages/mobile/app/dashboard.tsx
+++ b/packages/mobile/app/dashboard/(tabs)/settings.tsx
diff --git a/packages/mobile/app/dashboard/_layout.tsx b/packages/mobile/app/dashboard/_layout.tsx
new file mode 100644
index 00000000..590c82b1
--- /dev/null
+++ b/packages/mobile/app/dashboard/_layout.tsx
@@ -0,0 +1,9 @@
+import { Stack } from "expo-router/stack";
+
+export default function Dashboard() {
+  return (
+    <Stack>
+      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+    </Stack>
+  );
+}
diff --git a/packages/mobile/app/error.tsx b/packages/mobile/app/error.tsx
index a6a18023..2ca227a4 100644
--- a/packages/mobile/app/error.tsx
+++ b/packages/mobile/app/error.tsx
@@ -1,6 +1,6 @@
 import { View, Text } from "react-native";
 
-export default function Error() {
+export default function ErrorPage() {
   return (
     <View className="flex-1 items-center justify-center gap-4">
       <Text className="text-4xl">Error!</Text>
diff --git a/packages/mobile/app/sharing.tsx b/packages/mobile/app/sharing.tsx
index 948fed05..c9b6c0bb 100644
--- a/packages/mobile/app/sharing.tsx
+++ b/packages/mobile/app/sharing.tsx
@@ -1,12 +1,16 @@
-import { useLocalSearchParams, useRouter } from "expo-router";
+import { Link, useLocalSearchParams, useRouter } from "expo-router";
 import { ShareIntent } from "expo-share-intent";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { View, Text } from "react-native";
 
 import { api } from "@/lib/trpc";
 
-export default function Sharing() {
-  const router = useRouter();
+type Mode =
+  | { type: "idle" }
+  | { type: "success"; bookmarkId: string }
+  | { type: "error" };
+
+function SaveBookmark({ setMode }: { setMode: (mode: Mode) => void }) {
   const params = useLocalSearchParams();
 
   const shareIntent = useMemo(() => {
@@ -18,30 +22,67 @@ export default function Sharing() {
     return null;
   }, [params]);
 
+  useEffect(() => {
+    if (!isPending && shareIntent?.text) {
+      mutate({ type: "link", url: shareIntent.text });
+    }
+  }, []);
+
   const { mutate, isPending } = api.bookmarks.createBookmark.useMutation({
     onSuccess: (d) => {
-      router.replace(`bookmark/${d.id}`);
+      setMode({ type: "success", bookmarkId: d.id });
     },
     onError: () => {
-      router.replace("error");
+      setMode({ type: "error" });
     },
   });
 
-  useEffect(() => {
-    if (!isPending && shareIntent?.text) {
-      mutate({ type: "link", url: shareIntent.text });
+  return <Text className="text-4xl">Hoarding ...</Text>;
+}
+
+export default function Sharing() {
+  const router = useRouter();
+  const [mode, setMode] = useState<Mode>({ type: "idle" });
+
+  const isInModal = router.canGoBack();
+
+  let comp;
+  switch (mode.type) {
+    case "idle": {
+      comp = <SaveBookmark setMode={setMode} />;
+      break;
     }
-  }, []);
+    case "success": {
+      comp = <Text className="text-4xl">Hoarded!</Text>;
+      break;
+    }
+    case "error": {
+      comp = <Text className="text-4xl">Error!</Text>;
+      break;
+    }
+  }
 
+  // Auto dismiss the modal after saving.
   useEffect(() => {
-    if (!shareIntent) {
-      router.replace("/");
+    if (mode.type === "idle") {
+      return;
     }
-  }, []);
+
+    if (!isInModal) {
+      return;
+    }
+
+    const timeoutId = setTimeout(() => {
+      router.replace("../");
+    }, 2000);
+
+    return () => clearTimeout(timeoutId);
+  }, [mode.type]);
 
   return (
     <View className="flex-1 items-center justify-center gap-4">
-      <Text className="text-4xl">Hoarding ...</Text>
+      {comp}
+      {isInModal ? <Link href="../">Dismiss</Link> : <Link href="/">Home</Link>}
     </View>
   );
 }