mobile: Add support for viewing lists

2 files changed, 75 insertions, 1 deletions

diff --git a/packages/mobile/app/dashboard/(tabs)/_layout.tsx b/packages/mobile/app/dashboard/(tabs)/_layout.tsx
index c15f37f1..74557eda 100644
--- a/packages/mobile/app/dashboard/(tabs)/_layout.tsx
+++ b/packages/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -1,5 +1,5 @@
 import { Tabs } from "expo-router";
-import { Home, Settings } from "lucide-react-native";
+import { ClipboardList, Home, Settings } from "lucide-react-native";
 import React from "react";
 
 export default function TabLayout() {
@@ -13,6 +13,13 @@ export default function TabLayout() {
         }}
       />
       <Tabs.Screen
+        name="lists"
+        options={{
+          title: "Lists",
+          tabBarIcon: ({ color }) => <ClipboardList color={color} />,
+        }}
+      />
+      <Tabs.Screen
         name="settings"
         options={{
           title: "Settings",
diff --git a/packages/mobile/app/dashboard/(tabs)/lists.tsx b/packages/mobile/app/dashboard/(tabs)/lists.tsx
new file mode 100644
index 00000000..b534ddda
--- /dev/null
+++ b/packages/mobile/app/dashboard/(tabs)/lists.tsx
@@ -0,0 +1,67 @@
+import { Link } from "expo-router";
+import { useEffect, useState } from "react";
+import { FlatList, View } from "react-native";
+
+import { api } from "@/lib/trpc";
+
+export default function Lists() {
+  const [refreshing, setRefreshing] = useState(false);
+  const { data: lists, isPending } = api.lists.list.useQuery();
+  const apiUtils = api.useUtils();
+
+  useEffect(() => {
+    setRefreshing(isPending);
+  }, [isPending]);
+
+  if (!lists) {
+    // Add spinner
+    return <View />;
+  }
+
+  const onRefresh = () => {
+    apiUtils.lists.list.invalidate();
+  };
+
+  const links = [
+    {
+      id: "fav",
+      logo: "⭐️",
+      name: "Favourites",
+      href: "/dashboard/favourites",
+    },
+    {
+      id: "arch",
+      logo: "🗄️",
+      name: "Archive",
+      href: "/dashboard/archive",
+    },
+  ];
+
+  links.push(
+    ...lists.lists.map((l) => ({
+      id: l.id,
+      logo: l.icon,
+      name: l.name,
+      href: `/dashboard/lists/${l.id}`,
+    })),
+  );
+
+  return (
+    <FlatList
+      contentContainerStyle={{
+        gap: 10,
+        marginTop: 10,
+      }}
+      renderItem={(l) => (
+        <View className="mx-2 block rounded-xl border border-gray-100 bg-white px-4 py-2">
+          <Link key={l.item.id} href={l.item.href} className="text-lg">
+            {l.item.logo} {l.item.name}
+          </Link>
+        </View>
+      )}
+      data={links}
+      refreshing={refreshing}
+      onRefresh={onRefresh}
+    />
+  );
+}