ui(mobile): New header style in the app

1 files changed, 12 insertions, 5 deletions

diff --git a/apps/mobile/app/dashboard/lists/[slug].tsx b/apps/mobile/app/dashboard/lists/[slug].tsx
index f85aeeaf..0d1c01dc 100644
--- a/apps/mobile/app/dashboard/lists/[slug].tsx
+++ b/apps/mobile/app/dashboard/lists/[slug].tsx
@@ -1,7 +1,8 @@
-import { View } from "react-native";
+import { SafeAreaView, View } from "react-native";
 import { Stack, useLocalSearchParams } from "expo-router";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
+import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
 
 export default function ListView() {
@@ -12,19 +13,25 @@ export default function ListView() {
   const { data: list } = api.lists.get.useQuery({ listId: slug });
 
   return (
-    <>
+    <SafeAreaView>
       <Stack.Screen
         options={{
-          headerTitle: list ? `${list.icon} ${list.name}` : "Loading ...",
+          headerTitle: "",
+          headerBackTitle: "Back",
+          headerTransparent: true,
         }}
       />
       {list ? (
         <View>
-          <BookmarkList archived={false} ids={list.bookmarks} />
+          <BookmarkList
+            archived={false}
+            ids={list.bookmarks}
+            header={<PageTitle title={`${list.icon} ${list.name}`} />}
+          />
         </View>
       ) : (
         <FullPageSpinner />
       )}
-    </>
+    </SafeAreaView>
   );
 }