feat(mobile): Allow editing titles and a cleaner info page

1 files changed, 73 insertions, 14 deletions

diff --git a/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx b/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx
index 5d15ab6b..e0d87a09 100644
--- a/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx
+++ b/apps/mobile/app/dashboard/bookmarks/[slug]/info.tsx
@@ -1,6 +1,13 @@
 import React from "react";
-import { Text, View } from "react-native";
-import { Stack, useLocalSearchParams } from "expo-router";
+import {
+  Keyboard,
+  Pressable,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
+import { router, Stack, useLocalSearchParams } from "expo-router";
 import TagPill from "@/components/bookmarks/TagPill";
 import FullPageError from "@/components/FullPageError";
 import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView";
@@ -8,6 +15,7 @@ import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { Input } from "@/components/ui/Input";
 import { Skeleton } from "@/components/ui/Skeleton";
 import { api } from "@/lib/trpc";
+import { ChevronRight } from "lucide-react-native";
 
 import { useUpdateBookmark } from "@hoarder/shared-react/hooks/bookmarks";
 import { isBookmarkStillTagging } from "@hoarder/shared-react/utils/bookmarkUtils";
@@ -15,15 +23,15 @@ import { BookmarkTypes, ZBookmark } from "@hoarder/shared/types/bookmarks";
 
 function TagList({ bookmark }: { bookmark: ZBookmark }) {
   return (
-    <View className="flex flex-row items-center gap-4">
-      <Text className="text-foreground">Tags</Text>
+    <View className="flex gap-4">
+      <Text className="text-lg text-foreground">Tags</Text>
       {isBookmarkStillTagging(bookmark) ? (
         <>
           <Skeleton className="h-4 w-full" />
           <Skeleton className="h-4 w-full" />
         </>
       ) : bookmark.tags.length > 0 ? (
-        <View className="flex flex-row flex-wrap gap-2">
+        <View className="flex flex-row flex-wrap gap-2 rounded-lg bg-background p-4">
           {bookmark.tags.map((t) => (
             <TagPill key={t.id} tag={t} />
           ))}
@@ -35,14 +43,61 @@ function TagList({ bookmark }: { bookmark: ZBookmark }) {
   );
 }
 
+function ManageLists({ bookmark }: { bookmark: ZBookmark }) {
+  return (
+    <View className="flex gap-4">
+      <Text className="text-lg text-foreground">Lists</Text>
+      <Pressable
+        onPress={() =>
+          router.push(`/dashboard/bookmarks/${bookmark.id}/manage_lists`)
+        }
+        className="flex w-full flex-row justify-between gap-3 rounded-lg bg-white px-4 py-2 dark:bg-accent"
+      >
+        <Text className="text-lg text-accent-foreground">Manage Lists</Text>
+        <ChevronRight color="rgb(0, 122, 255)" />
+      </Pressable>
+    </View>
+  );
+}
+
+function TitleEditor({
+  bookmarkId,
+  title,
+}: {
+  bookmarkId: string;
+  title: string;
+}) {
+  const { mutate, isPending } = useUpdateBookmark();
+  return (
+    <View className="flex gap-4">
+      <Text className="text-lg text-foreground">Title</Text>
+
+      <Input
+        editable={!isPending}
+        multiline={true}
+        numberOfLines={3}
+        loading={isPending}
+        placeholder="Title"
+        textAlignVertical="top"
+        onEndEditing={(ev) =>
+          mutate({
+            bookmarkId,
+            title: ev.nativeEvent.text ? ev.nativeEvent.text : null,
+          })
+        }
+        defaultValue={title ?? ""}
+      />
+    </View>
+  );
+}
+
 function NotesEditor({ bookmark }: { bookmark: ZBookmark }) {
   const { mutate, isPending } = useUpdateBookmark();
   return (
-    <View className="flex flex-row items-center gap-4">
-      <Text className="text-foreground">Notes</Text>
+    <View className="flex gap-4">
+      <Text className="text-lg text-foreground">Notes</Text>
 
       <Input
-        className="flex-1"
         editable={!isPending}
         multiline={true}
         numberOfLines={3}
@@ -102,12 +157,16 @@ const ViewBookmarkPage = () => {
           headerTitle: title ?? "Untitled",
         }}
       />
-      <View className="w-full p-4">
-        <View className="gap-4 px-4">
-          <TagList bookmark={bookmark} />
-          <NotesEditor bookmark={bookmark} />
-        </View>
-      </View>
+      <ScrollView className="h-screen w-full p-4">
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <View className="gap-4 px-2">
+            <TitleEditor bookmarkId={bookmark.id} title={title ?? ""} />
+            <TagList bookmark={bookmark} />
+            <ManageLists bookmark={bookmark} />
+            <NotesEditor bookmark={bookmark} />
+          </View>
+        </TouchableWithoutFeedback>
+      </ScrollView>
     </CustomSafeAreaView>
   );
 };