1 files changed, 56 insertions, 0 deletions
diff --git a/apps/mobile/app/dashboard/(tabs)/highlights.tsx b/apps/mobile/app/dashboard/(tabs)/highlights.tsx
new file mode 100644
index 00000000..7879081b
--- /dev/null
+++ b/apps/mobile/app/dashboard/(tabs)/highlights.tsx
@@ -0,0 +1,56 @@
+import { View } from "react-native";
+import FullPageError from "@/components/FullPageError";
+import HighlightList from "@/components/highlights/HighlightList";
+import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
+import FullPageSpinner from "@/components/ui/FullPageSpinner";
+import PageTitle from "@/components/ui/PageTitle";
+
+import { api } from "@karakeep/shared-react/trpc";
+
+export default function Highlights() {
+  const apiUtils = api.useUtils();
+  const {
+    data,
+    isPending,
+    isPlaceholderData,
+    error,
+    fetchNextPage,
+    isFetchingNextPage,
+    refetch,
+  } = api.highlights.getAll.useInfiniteQuery(
+    {},
+    {
+      initialCursor: null,
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    },
+  );
+
+  if (error) {
+    return <FullPageError error={error.message} onRetry={() => refetch()} />;
+  }
+
+  if (isPending || !data) {
+    return <FullPageSpinner />;
+  }
+
+  const onRefresh = () => {
+    apiUtils.highlights.getAll.invalidate();
+  };
+
+  return (
+    <CustomSafeAreaView>
+      <HighlightList
+        highlights={data.pages.flatMap((p) => p.highlights)}
+        header={
+          <View className="flex flex-row justify-between">
+            <PageTitle title="Highlights" />
+          </View>
+        }
+        onRefresh={onRefresh}
+        fetchNextPage={fetchNextPage}
+        isFetchingNextPage={isFetchingNextPage}
+        isRefreshing={isPending || isPlaceholderData}
+      />
+    </CustomSafeAreaView>
+  );
+}