feat: display notes on bookmark card (#2083)

* feat: display notes on bookmark card

* apply styling

* include mobile impl

* apply pr comments

* add display options menu into PR

* put it under app setting

* cleanup

* address pr comments

* change the default for show notes to false

* make the in-card note font lighter

---------

Co-authored-by: Mohamed Bassem <me@mbassem.com>

1 files changed, 83 insertions, 0 deletions

diff --git a/apps/mobile/components/bookmarks/NotePreview.tsx b/apps/mobile/components/bookmarks/NotePreview.tsx
new file mode 100644
index 00000000..d529d56e
--- /dev/null
+++ b/apps/mobile/components/bookmarks/NotePreview.tsx
@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { Modal, Pressable, ScrollView, View } from "react-native";
+import { router } from "expo-router";
+import { ExternalLink, NotepadText, X } from "lucide-react-native";
+import { useColorScheme } from "nativewind";
+
+import { Button } from "../ui/Button";
+import { Text } from "../ui/Text";
+
+interface NotePreviewProps {
+  note: string;
+  bookmarkId: string;
+}
+
+export function NotePreview({ note, bookmarkId }: NotePreviewProps) {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const { colorScheme } = useColorScheme();
+  const iconColor = colorScheme === "dark" ? "#9ca3af" : "#6b7280";
+  const modalIconColor = colorScheme === "dark" ? "#d1d5db" : "#374151";
+
+  if (!note?.trim()) {
+    return null;
+  }
+
+  return (
+    <>
+      <Pressable onPress={() => setIsModalVisible(true)}>
+        <View className="flex flex-row items-center gap-2">
+          <NotepadText size={24} color={iconColor} />
+          <Text
+            className="flex-1 text-sm italic text-gray-500 dark:text-gray-400"
+            numberOfLines={2}
+          >
+            {note}
+          </Text>
+        </View>
+      </Pressable>
+
+      <Modal
+        visible={isModalVisible}
+        transparent
+        animationType="slide"
+        onRequestClose={() => setIsModalVisible(false)}
+      >
+        <View className="flex-1 justify-end bg-black/50">
+          <View className="max-h-[80%] rounded-t-3xl bg-card p-6">
+            {/* Header */}
+            <View className="mb-4 flex flex-row items-center justify-between">
+              <Text className="text-lg font-semibold">Note</Text>
+              <Pressable
+                onPress={() => setIsModalVisible(false)}
+                className="p-2"
+              >
+                <X size={24} color={modalIconColor} />
+              </Pressable>
+            </View>
+
+            {/* Note Content */}
+            <ScrollView className="mb-4 max-h-96">
+              <Text className="text-sm text-gray-700 dark:text-gray-300">
+                {note}
+              </Text>
+            </ScrollView>
+
+            {/* Action Button */}
+            <View className="flex flex-row justify-end border-t border-border pt-4">
+              <Button
+                variant="secondary"
+                onPress={() => {
+                  setIsModalVisible(false);
+                  router.push(`/dashboard/bookmarks/${bookmarkId}/info`);
+                }}
+              >
+                <Text className="text-sm">Edit Notes</Text>
+                <ExternalLink size={14} color={modalIconColor} />
+              </Button>
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+}