feat(mobile): more native screens

5 files changed, 41 insertions, 4 deletions

diff --git a/apps/mobile/components/bookmarks/BookmarkCard.tsx b/apps/mobile/components/bookmarks/BookmarkCard.tsx
index cd0ea445..060aada9 100644
--- a/apps/mobile/components/bookmarks/BookmarkCard.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkCard.tsx
@@ -539,5 +539,12 @@ export default function BookmarkCard({
       break;
   }
 
-  return <View className="overflow-hidden rounded-xl bg-card">{comp}</View>;
+  return (
+    <View
+      className="overflow-hidden rounded-xl bg-card"
+      style={{ borderCurve: "continuous" }}
+    >
+      {comp}
+    </View>
+  );
 }
diff --git a/apps/mobile/components/bookmarks/BookmarkList.tsx b/apps/mobile/components/bookmarks/BookmarkList.tsx
index adcf12e0..b3ac13e0 100644
--- a/apps/mobile/components/bookmarks/BookmarkList.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkList.tsx
@@ -30,6 +30,7 @@ export default function BookmarkList({
     <Animated.FlatList
       ref={flatListRef}
       itemLayoutAnimation={LinearTransition}
+      contentInsetAdjustmentBehavior="automatic"
       ListHeaderComponent={header}
       contentContainerStyle={{
         gap: 15,
diff --git a/apps/mobile/components/highlights/HighlightCard.tsx b/apps/mobile/components/highlights/HighlightCard.tsx
index 31b3c829..ec4278c5 100644
--- a/apps/mobile/components/highlights/HighlightCard.tsx
+++ b/apps/mobile/components/highlights/HighlightCard.tsx
@@ -80,7 +80,10 @@ export default function HighlightCard({
   };
 
   return (
-    <View className="overflow-hidden rounded-xl bg-card p-4">
+    <View
+      className="overflow-hidden rounded-xl bg-card p-4"
+      style={{ borderCurve: "continuous" }}
+    >
       <View className="flex gap-3">
         {/* Highlight text with colored border */}
         <View
diff --git a/apps/mobile/components/highlights/HighlightList.tsx b/apps/mobile/components/highlights/HighlightList.tsx
index 865add2a..7d7bb1d4 100644
--- a/apps/mobile/components/highlights/HighlightList.tsx
+++ b/apps/mobile/components/highlights/HighlightList.tsx
@@ -30,6 +30,7 @@ export default function HighlightList({
     <Animated.FlatList
       ref={flatListRef}
       itemLayoutAnimation={LinearTransition}
+      contentInsetAdjustmentBehavior="automatic"
       ListHeaderComponent={header}
       contentContainerStyle={{
         gap: 15,
diff --git a/apps/mobile/components/ui/Avatar.tsx b/apps/mobile/components/ui/Avatar.tsx
index ed31df23..239eaba8 100644
--- a/apps/mobile/components/ui/Avatar.tsx
+++ b/apps/mobile/components/ui/Avatar.tsx
@@ -13,6 +13,28 @@ interface AvatarProps {
   fallbackClassName?: string;
 }
 
+const AVATAR_COLORS = [
+  "#f87171", // red-400
+  "#fb923c", // orange-400
+  "#fbbf24", // amber-400
+  "#a3e635", // lime-400
+  "#34d399", // emerald-400
+  "#22d3ee", // cyan-400
+  "#60a5fa", // blue-400
+  "#818cf8", // indigo-400
+  "#a78bfa", // violet-400
+  "#e879f9", // fuchsia-400
+];
+
+function nameToColor(name: string | null | undefined): string {
+  if (!name) return AVATAR_COLORS[0];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+
 function isExternalUrl(url: string) {
   return url.startsWith("http://") || url.startsWith("https://");
 }
@@ -46,22 +68,25 @@ export function Avatar({
   }, [name]);
 
   const showFallback = !imageUrl || imageError;
+  const avatarColor = nameToColor(name);
 
   return (
     <View
-      className={cn("overflow-hidden bg-black", className)}
+      className={cn("overflow-hidden", className)}
       style={{
         width: size,
         height: size,
         borderRadius: size / 2,
+        backgroundColor: showFallback ? avatarColor : undefined,
       }}
     >
       {showFallback ? (
         <View
           className={cn(
-            "flex h-full w-full items-center justify-center bg-black",
+            "flex h-full w-full items-center justify-center",
             fallbackClassName,
           )}
+          style={{ backgroundColor: avatarColor }}
         >
           <Text
             className="text-white"