From 8a5a109cdf14b6503b6bd07aa667788924a12fe6 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 23 Nov 2025 12:22:34 +0000
Subject: feat(mobile): Add highlights page to mobile app (#2156)

* feat: Add highlights page to mobile app

This commit adds a new highlights page to the mobile app where users can
view all their highlights with the following features:

- HighlightCard component: Displays individual highlights with colored borders,
  text, optional notes, timestamps, and a link to the source bookmark
- HighlightList component: Renders a scrollable list of highlights with
  pull-to-refresh and infinite scroll pagination
- UpdatingHighlightList component: Handles data fetching using tRPC infinite
  queries with automatic cache invalidation
- New /dashboard/highlights route with large header title
- Added navigation link in Settings tab under "App Settings"

All components follow the existing mobile app patterns and integrate with
the existing highlights API.

* make it a tab

---------

Co-authored-by: Claude <noreply@anthropic.com>
---
 apps/mobile/app/dashboard/(tabs)/_layout.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

(limited to 'apps/mobile/app/dashboard/(tabs)/_layout.tsx')

diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
index 316eddcf..5cc6aa92 100644
--- a/apps/mobile/app/dashboard/(tabs)/_layout.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -2,7 +2,13 @@ import React, { useLayoutEffect } from "react";
 import { Tabs, useNavigation } from "expo-router";
 import { StyledTabs } from "@/components/navigation/tabs";
 import { useColorScheme } from "@/lib/useColorScheme";
-import { ClipboardList, Home, Settings, Tag } from "lucide-react-native";
+import {
+  ClipboardList,
+  Highlighter,
+  Home,
+  Settings,
+  Tag,
+} from "lucide-react-native";
 
 export default function TabLayout() {
   const { colors } = useColorScheme();
@@ -44,6 +50,13 @@ export default function TabLayout() {
           tabBarIcon: ({ color }) => <Tag color={color} />,
         }}
       />
+      <Tabs.Screen
+        name="highlights"
+        options={{
+          title: "Highlights",
+          tabBarIcon: ({ color }) => <Highlighter color={color} />,
+        }}
+      />
       <Tabs.Screen
         name="settings"
         options={{
-- 
cgit v1.2.3-70-g09d2

