feat: update ChatScreen and ScreenWrapper for improved layout and add lucide-react-native dependency

Author: KadekPindra

app/(tabs)/chat.tsx

@@ -1,4 +1,3 @@
-import AppHeader from "@/components/AppHeader";
 import ScreenWrapper from "@/components/ScreenWrapper";
 import { sendChatMessage } from "@/services/aiService";
 import { Ionicons } from "@expo/vector-icons";
@@ -80,9 +79,7 @@ export default function ChatScreen() {
     const isUser = item.sender === "user";
 
     return (
-      <View
-        className={`mb-3 px-1 ${isUser ? "items-end" : "items-start"}`}
-      >
+      <View className={`mb-3 px-1 ${isUser ? "items-end" : "items-start"}`}>
         <View
           className={`rounded-2xl px-4 py-3 max-w-[80%] ${
             isUser ? "bg-green-600" : "bg-gray-100"
@@ -106,7 +103,7 @@ export default function ChatScreen() {
   };
 
   return (
-    <ScreenWrapper>
+    <ScreenWrapper scrollable={false}>
       <KeyboardAvoidingView
         className="flex-1"
         behavior={Platform.OS === "ios" ? "padding" : undefined}

components/ScreenWrapper.tsx

@@ -6,23 +6,35 @@ type ScreenWrapperProps = {
   children: ReactNode;
   header?: ReactNode;
   scrollRef?: RefObject<ScrollView | null>;
+  scrollable?: boolean;
 };
 
 export default function ScreenWrapper({
   children,
   header,
   scrollRef,
+  scrollable = true,
 }: ScreenWrapperProps) {
+  const content = (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <View style={{ flex: 1 }} className="px-8">
+        {children}
+      </View>
+    </>
+  );
+
   return (
     <SafeAreaView
       edges={["top", "left", "right"]}
       style={{ flex: 1, backgroundColor: "#fcf7f9" }}
     >
       {header ? <View style={{ zIndex: 10 }}>{header}</View> : null}
-      <ScrollView ref={scrollRef} className="px-8">
-        <StatusBar barStyle="dark-content" />
-        <View style={{ flex: 1 }}>{children}</View>
-      </ScrollView>
+      {scrollable ? (
+        <ScrollView ref={scrollRef}>{content}</ScrollView>
+      ) : (
+        <View style={{ flex: 1 }}>{content}</View>
+      )}
     </SafeAreaView>
   );
 }