diff options
| author | Mohamed Bassem <me@mbassem.com> | 2025-11-23 12:22:34 +0000 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-11-23 12:22:34 +0000 |
| commit | 8a5a109cdf14b6503b6bd07aa667788924a12fe6 (patch) | |
| tree | 2d43fc8f3f9ba7f262e6a0135868194dc3b149a2 /apps/mobile/app/dashboard/(tabs)/_layout.tsx | |
| parent | 7f555f574a0915c6302fb5ad7982a4529fe8a335 (diff) | |
| download | karakeep-8a5a109cdf14b6503b6bd07aa667788924a12fe6.tar.zst | |
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>
Diffstat (limited to 'apps/mobile/app/dashboard/(tabs)/_layout.tsx')
| -rw-r--r-- | apps/mobile/app/dashboard/(tabs)/_layout.tsx | 15 |
1 files changed, 14 insertions, 1 deletions
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(); @@ -45,6 +51,13 @@ export default function TabLayout() { }} /> <Tabs.Screen + name="highlights" + options={{ + title: "Highlights", + tabBarIcon: ({ color }) => <Highlighter color={color} />, + }} + /> + <Tabs.Screen name="settings" options={{ title: "Settings", |
