feat(mobile): Add tag viewing page

2 files changed, 34 insertions, 2 deletions

diff --git a/apps/mobile/app/dashboard/tags/[slug].tsx b/apps/mobile/app/dashboard/tags/[slug].tsx
new file mode 100644
index 00000000..39d1a87d
--- /dev/null
+++ b/apps/mobile/app/dashboard/tags/[slug].tsx
@@ -0,0 +1,31 @@
+import { View } from "react-native";
+import { Stack, useLocalSearchParams } from "expo-router";
+import BookmarkList from "@/components/bookmarks/BookmarkList";
+import FullPageSpinner from "@/components/ui/FullPageSpinner";
+import { api } from "@/lib/trpc";
+
+export default function ListView() {
+  const { slug } = useLocalSearchParams();
+  if (typeof slug !== "string") {
+    throw new Error("Unexpected param type");
+  }
+
+  const { data: tag } = api.tags.get.useQuery({ tagId: slug });
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerTitle: tag ? `${tag.name}` : "Loading ...",
+        }}
+      />
+      {tag ? (
+        <View>
+          <BookmarkList archived={false} ids={tag.bookmarks} />
+        </View>
+      ) : (
+        <FullPageSpinner />
+      )}
+    </>
+  );
+}
diff --git a/apps/mobile/components/bookmarks/BookmarkCard.tsx b/apps/mobile/components/bookmarks/BookmarkCard.tsx
index 07d7f4fe..a969bc8b 100644
--- a/apps/mobile/components/bookmarks/BookmarkCard.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkCard.tsx
@@ -9,6 +9,7 @@ import {
 } from "react-native";
 import Markdown from "react-native-markdown-display";
 import * as Haptics from "expo-haptics";
+import { Link } from "expo-router";
 import * as WebBrowser from "expo-web-browser";
 import { api } from "@/lib/trpc";
 import { MenuView } from "@react-native-menu/menu";
@@ -57,7 +58,7 @@ function ActionBar({ bookmark }: { bookmark: ZBookmark }) {
     api.bookmarks.deleteBookmark.useMutation({
       onSuccess: () => {
         toast({
-          message: 'The bookmark has been deleted!',
+          message: "The bookmark has been deleted!",
           showProgress: false,
         });
         apiUtils.bookmarks.getBookmarks.invalidate();
@@ -169,7 +170,7 @@ function TagList({ bookmark }: { bookmark: ZBookmark }) {
             key={t.id}
             className="rounded-full border border-gray-200 px-2.5 py-0.5 text-xs font-semibold"
           >
-            <Text>{t.name}</Text>
+            <Link href={`dashboard/tags/${t.id}`}>{t.name}</Link>
           </View>
         ))}
       </View>