ui(mobile): Make page titles more native

6 files changed, 37 insertions, 23 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
index 46bf0f77..4e403a99 100644
--- a/apps/mobile/app/dashboard/(tabs)/_layout.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -1,9 +1,17 @@
-import React from "react";
-import { Tabs } from "expo-router";
+import React, { useEffect } from "react";
+import { Tabs, useNavigation } from "expo-router";
 import { StyledTabs } from "@/components/navigation/tabs";
 import { ClipboardList, Home, Settings } from "lucide-react-native";
 
 export default function TabLayout() {
+  const navigation = useNavigation();
+  // Hide the header on the parent screen
+  useEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
   return (
     <StyledTabs
       tabBarClassName="bg-gray-100 dark:bg-background"
diff --git a/apps/mobile/app/dashboard/_layout.tsx b/apps/mobile/app/dashboard/_layout.tsx
index 5717f711..d6e5ab7c 100644
--- a/apps/mobile/app/dashboard/_layout.tsx
+++ b/apps/mobile/app/dashboard/_layout.tsx
@@ -1,7 +1,7 @@
 import type { AppStateStatus } from "react-native";
 import { useEffect } from "react";
 import { AppState, Platform } from "react-native";
-import { useRouter } from "expo-router";
+import { useNavigation, useRouter } from "expo-router";
 import { Stack } from "expo-router/stack";
 import { StyledStack } from "@/components/navigation/stack";
 import { useIsLoggedIn } from "@/lib/session";
@@ -16,6 +16,14 @@ function onAppStateChange(status: AppStateStatus) {
 export default function Dashboard() {
   const router = useRouter();
 
+  const navigation = useNavigation();
+  // Hide the header on the parent screen
+  useEffect(() => {
+    navigation.setOptions({
+      headerShown: false,
+    });
+  }, [navigation]);
+
   const isLoggedIn = useIsLoggedIn();
   useEffect(() => {
     if (isLoggedIn !== undefined && !isLoggedIn) {
@@ -32,7 +40,6 @@ export default function Dashboard() {
   return (
     <StyledStack
       contentClassName="bg-gray-100 dark:bg-background"
-      headerClassName="bg-gray-100 dark:bg-background text-foreground"
       screenOptions={{
         headerTransparent: true,
       }}
diff --git a/apps/mobile/app/dashboard/archive.tsx b/apps/mobile/app/dashboard/archive.tsx
index 2fe5d274..b4cc3a66 100644
--- a/apps/mobile/app/dashboard/archive.tsx
+++ b/apps/mobile/app/dashboard/archive.tsx
@@ -1,14 +1,16 @@
+import { useNavigation } from "expo-router";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
-import PageTitle from "@/components/ui/PageTitle";
 
 export default function Archive() {
+  const navigator = useNavigation();
+  navigator.setOptions({
+    headerTitle: "🗄️ Archive",
+    headerLargeTitle: true,
+  });
   return (
     <CustomSafeAreaView>
-      <UpdatingBookmarkList
-        query={{ archived: true }}
-        header={<PageTitle title="🗄️ Archive" />}
-      />
+      <UpdatingBookmarkList query={{ archived: true }} />
     </CustomSafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/favourites.tsx b/apps/mobile/app/dashboard/favourites.tsx
index fb39504b..1dddfe31 100644
--- a/apps/mobile/app/dashboard/favourites.tsx
+++ b/apps/mobile/app/dashboard/favourites.tsx
@@ -1,15 +1,19 @@
+import { useNavigation } from "expo-router";
 import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
-import PageTitle from "@/components/ui/PageTitle";
 
 export default function Favourites() {
+  const navigator = useNavigation();
+  navigator.setOptions({
+    headerTitle: "⭐️ Favourites",
+    headerLargeTitle: true,
+  });
   return (
     <CustomSafeAreaView>
       <UpdatingBookmarkList
         query={{
           favourited: true,
         }}
-        header={<PageTitle title="⭐️ Favourites" />}
       />
     </CustomSafeAreaView>
   );
diff --git a/apps/mobile/app/dashboard/lists/[slug].tsx b/apps/mobile/app/dashboard/lists/[slug].tsx
index 72e3d0ae..f98dd6d3 100644
--- a/apps/mobile/app/dashboard/lists/[slug].tsx
+++ b/apps/mobile/app/dashboard/lists/[slug].tsx
@@ -5,7 +5,6 @@ import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import FullPageError from "@/components/FullPageError";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
-import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
 import { MenuView } from "@react-native-menu/menu";
 import { Ellipsis } from "lucide-react-native";
@@ -25,9 +24,10 @@ export default function ListView() {
     <CustomSafeAreaView>
       <Stack.Screen
         options={{
-          headerTitle: "",
+          headerTitle: list ? `${list.icon} ${list.name}` : "",
           headerBackTitle: "Back",
-          headerTransparent: true,
+          headerLargeTitle: true,
+          headerRight: () => <ListActionsMenu listId={slug} />,
         }}
       />
       {error ? (
@@ -38,12 +38,6 @@ export default function ListView() {
             query={{
               listId: list.id,
             }}
-            header={
-              <View className="flex flex-row items-center justify-between">
-                <PageTitle title={`${list.icon} ${list.name}`} />
-                <ListActionsMenu listId={list.id} />
-              </View>
-            }
           />
         </View>
       ) : (
diff --git a/apps/mobile/app/dashboard/tags/[slug].tsx b/apps/mobile/app/dashboard/tags/[slug].tsx
index 54bbc31b..3f294328 100644
--- a/apps/mobile/app/dashboard/tags/[slug].tsx
+++ b/apps/mobile/app/dashboard/tags/[slug].tsx
@@ -4,7 +4,6 @@ import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import FullPageError from "@/components/FullPageError";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
-import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
 
 export default function TagView() {
@@ -19,9 +18,10 @@ export default function TagView() {
     <CustomSafeAreaView>
       <Stack.Screen
         options={{
-          headerTitle: "",
+          headerTitle: tag?.name ?? "",
           headerBackTitle: "Back",
           headerTransparent: true,
+          headerLargeTitle: true,
         }}
       />
       {error ? (
@@ -32,7 +32,6 @@ export default function TagView() {
             query={{
               tagId: tag.id,
             }}
-            header={<PageTitle title={tag.name} />}
           />
         </View>
       ) : (