ui(mobile): New header style in the app

5 files changed, 107 insertions, 90 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
index ce73a5c9..db6656b2 100644
--- a/apps/mobile/app/dashboard/(tabs)/_layout.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -4,7 +4,7 @@ import { ClipboardList, Home, Search, Settings } from "lucide-react-native";
 
 export default function TabLayout() {
   return (
-    <Tabs screenOptions={{ tabBarActiveTintColor: "blue" }}>
+    <Tabs screenOptions={{ tabBarActiveTintColor: "blue", headerShown: false }}>
       <Tabs.Screen
         name="index"
         options={{
diff --git a/apps/mobile/app/dashboard/(tabs)/index.tsx b/apps/mobile/app/dashboard/(tabs)/index.tsx
index 1736def9..1a17d472 100644
--- a/apps/mobile/app/dashboard/(tabs)/index.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/index.tsx
@@ -1,60 +1,62 @@
-import { Platform, View } from "react-native";
+import { Platform, SafeAreaView, View } from "react-native";
 import * as Haptics from "expo-haptics";
-import { Stack, useRouter } from "expo-router";
+import { useRouter } from "expo-router";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
 import { MenuView } from "@react-native-menu/menu";
 import { SquarePen } from "lucide-react-native";
+import PageTitle from "@/components/ui/PageTitle";
 
 function HeaderRight() {
   const router = useRouter();
   return (
-      <MenuView
-        onPressAction={({ nativeEvent }) => {
-          Haptics.selectionAsync();
-          if (nativeEvent.event === "note") {
-            router.navigate("dashboard/add-note");
-          } else if (nativeEvent.event === "link") {
-            router.navigate("dashboard/add-link");
-          }
-        }}
-        actions={[
-          {
-            id: "link",
-            title: "New Link",
-            image: Platform.select({
-              ios: "link",
-              android: "ic_menu_link",
-            }),
-          },
-          {
-            id: "note",
-            title: "New Note",
-            image: Platform.select({
-              ios: "note",
-              android: "ic_menu_note",
-            }),
-          },
-        ]}
-        shouldOpenOnLongPress={false}
-      >
-        <View className="mt-2 px-2">
-          <SquarePen
-            onPress={() => Haptics.selectionAsync()}
-          />
-        </View>
-      </MenuView>
+    <MenuView
+      onPressAction={({ nativeEvent }) => {
+        Haptics.selectionAsync();
+        if (nativeEvent.event === "note") {
+          router.navigate("dashboard/add-note");
+        } else if (nativeEvent.event === "link") {
+          router.navigate("dashboard/add-link");
+        }
+      }}
+      actions={[
+        {
+          id: "link",
+          title: "New Link",
+          image: Platform.select({
+            ios: "link",
+            android: "ic_menu_link",
+          }),
+        },
+        {
+          id: "note",
+          title: "New Note",
+          image: Platform.select({
+            ios: "note",
+            android: "ic_menu_note",
+          }),
+        },
+      ]}
+      shouldOpenOnLongPress={false}
+    >
+      <View className="my-auto px-4">
+        <SquarePen onPress={() => Haptics.selectionAsync()} />
+      </View>
+    </MenuView>
   );
 }
 
 export default function Home() {
   return (
-    <>
-      <Stack.Screen
-        options={{
-          headerRight: () => <HeaderRight />,
-        }}
+    <SafeAreaView>
+      <BookmarkList
+        archived={false}
+        header={
+          <View className="flex flex-row justify-between">
+            <PageTitle title="Home" />
+            <HeaderRight />
+          </View>
+        }
       />
-      <BookmarkList archived={false} />
-    </>
+    </SafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
index 2aece541..e0ed8489 100644
--- a/apps/mobile/app/dashboard/(tabs)/lists.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react";
-import { FlatList, View, Text, Pressable } from "react-native";
+import { FlatList, Pressable, SafeAreaView, Text, View } from "react-native";
 import { Link } from "expo-router";
 import { api } from "@/lib/trpc";
 import { ChevronRight } from "lucide-react-native";
+import PageTitle from "@/components/ui/PageTitle";
 
 export default function Lists() {
   const [refreshing, setRefreshing] = useState(false);
@@ -47,24 +48,28 @@ export default function Lists() {
   );
 
   return (
-    <FlatList
-      contentContainerStyle={{
-        gap: 5,
-        marginTop: 5,
-      }}
-      renderItem={(l) => (
-        <Link asChild key={l.item.id} href={l.item.href}>
-          <Pressable className="mx-2 flex flex-row justify-between rounded-xl border border-gray-100 bg-white px-4 py-2">
-            <Text className="text-lg">
-              {l.item.logo} {l.item.name}
-            </Text>
-            <ChevronRight />
-          </Pressable>
-        </Link>
-      )}
-      data={links}
-      refreshing={refreshing}
-      onRefresh={onRefresh}
-    />
+    <SafeAreaView>
+      <FlatList
+        ListHeaderComponent={
+          <PageTitle title="Lists" />
+        }
+        contentContainerStyle={{
+          gap: 5,
+        }}
+        renderItem={(l) => (
+          <Link asChild key={l.item.id} href={l.item.href}>
+            <Pressable className="mx-2 flex flex-row justify-between rounded-xl border border-gray-100 bg-white px-4 py-2">
+              <Text className="text-lg">
+                {l.item.logo} {l.item.name}
+              </Text>
+              <ChevronRight />
+            </Pressable>
+          </Link>
+        )}
+        data={links}
+        refreshing={refreshing}
+        onRefresh={onRefresh}
+      />
+    </SafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/(tabs)/search.tsx b/apps/mobile/app/dashboard/(tabs)/search.tsx
index 043dffab..76e9aef9 100644
--- a/apps/mobile/app/dashboard/(tabs)/search.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/search.tsx
@@ -1,11 +1,11 @@
 import { useState } from "react";
-import { View } from "react-native";
+import { SafeAreaView, View } from "react-native";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
-import { Divider } from "@/components/ui/Divider";
 import { Input } from "@/components/ui/Input";
 import { api } from "@/lib/trpc";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useDebounce } from "use-debounce";
+import PageTitle from "@/components/ui/PageTitle";
 
 export default function Search() {
   const [search, setSearch] = useState("");
@@ -18,17 +18,25 @@ export default function Search() {
   );
 
   return (
-    <View>
-      <Input
-        placeholder="Search"
-        className="mx-4 mt-4 bg-white"
-        value={search}
-        onChangeText={setSearch}
-        autoFocus
-        autoCapitalize="none"
-      />
-      <Divider orientation="horizontal" className="mt-4 w-full" />
-      {data && <BookmarkList ids={data.bookmarks.map((b) => b.id)} />}
-    </View>
+    <SafeAreaView>
+      {data && (
+        <BookmarkList
+          ids={data.bookmarks.map((b) => b.id)}
+          header={
+            <View>
+              <PageTitle title="Search" />
+              <Input
+                placeholder="Search"
+                className="mx-4 bg-white"
+                value={search}
+                onChangeText={setSearch}
+                autoFocus
+                autoCapitalize="none"
+              />
+            </View>
+          }
+        />
+      )}
+    </SafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx
index 81b21fc8..fe138f52 100644
--- a/apps/mobile/app/dashboard/(tabs)/settings.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx
@@ -1,10 +1,10 @@
 import { useEffect } from "react";
-import { Text, View } from "react-native";
+import { SafeAreaView, Text, View } from "react-native";
 import { useRouter } from "expo-router";
-import Logo from "@/components/Logo";
 import { Button } from "@/components/ui/Button";
 import { useSession } from "@/lib/session";
 import { api } from "@/lib/trpc";
+import PageTitle from "@/components/ui/PageTitle";
 
 export default function Dashboard() {
   const router = useRouter();
@@ -26,15 +26,17 @@ export default function Dashboard() {
   }, [error]);
 
   return (
-    <View className="flex h-full w-full items-center gap-4 p-4">
-      <Logo />
-      <View className="w-full rounded-lg bg-white px-4 py-2">
-        <Text className="text-lg">
-          {isLoading ? "Loading ..." : data?.email}
-        </Text>
-      </View>
+    <SafeAreaView>
+      <PageTitle title="Settings" />
+      <View className="flex h-full w-full items-center gap-4 px-4 py-2">
+        <View className="w-full rounded-lg bg-white px-4 py-2">
+          <Text className="text-lg">
+            {isLoading ? "Loading ..." : data?.email}
+          </Text>
+        </View>
 
-      <Button className="w-full" label="Log Out" onPress={logout} />
-    </View>
+        <Button className="w-full" label="Log Out" onPress={logout} />
+      </View>
+    </SafeAreaView>
   );
 }