2 files changed, 68 insertions, 0 deletions
diff --git a/apps/mobile/app/dashboard/(tabs)/(highlights)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/(highlights)/_layout.tsx
new file mode 100644
index 00000000..961df836
--- /dev/null
+++ b/apps/mobile/app/dashboard/(tabs)/(highlights)/_layout.tsx
@@ -0,0 +1,18 @@
+import { Stack } from "expo-router/stack";
+
+export default function Layout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerLargeTitle: true,
+        headerTransparent: true,
+        headerBlurEffect: "systemMaterial",
+        headerShadowVisible: false,
+        headerLargeTitleShadowVisible: false,
+        headerLargeStyle: { backgroundColor: "transparent" },
+      }}
+    >
+      <Stack.Screen name="index" options={{ title: "Highlights" }} />
+    </Stack>
+  );
+}
diff --git a/apps/mobile/app/dashboard/(tabs)/(highlights)/index.tsx b/apps/mobile/app/dashboard/(tabs)/(highlights)/index.tsx
new file mode 100644
index 00000000..48a190c1
--- /dev/null
+++ b/apps/mobile/app/dashboard/(tabs)/(highlights)/index.tsx
@@ -0,0 +1,50 @@
+import FullPageError from "@/components/FullPageError";
+import HighlightList from "@/components/highlights/HighlightList";
+import FullPageSpinner from "@/components/ui/FullPageSpinner";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
+
+import { useTRPC } from "@karakeep/shared-react/trpc";
+
+export default function Highlights() {
+  const api = useTRPC();
+  const queryClient = useQueryClient();
+  const {
+    data,
+    isPending,
+    isPlaceholderData,
+    error,
+    fetchNextPage,
+    isFetchingNextPage,
+    refetch,
+  } = useInfiniteQuery(
+    api.highlights.getAll.infiniteQueryOptions(
+      {},
+      {
+        initialCursor: null,
+        getNextPageParam: (lastPage) => lastPage.nextCursor,
+      },
+    ),
+  );
+
+  if (error) {
+    return <FullPageError error={error.message} onRetry={() => refetch()} />;
+  }
+
+  if (isPending || !data) {
+    return <FullPageSpinner />;
+  }
+
+  const onRefresh = () => {
+    queryClient.invalidateQueries(api.highlights.getAll.pathFilter());
+  };
+
+  return (
+    <HighlightList
+      highlights={data.pages.flatMap((p) => p.highlights)}
+      onRefresh={onRefresh}
+      fetchNextPage={fetchNextPage}
+      isFetchingNextPage={isFetchingNextPage}
+      isRefreshing={isPending || isPlaceholderData}
+    />
+  );
+}