store twilio stuff in TwilioAccount table and remodel session data

app/features/messages/components/conversation.tsx

@@ -10,7 +10,7 @@ import { type ConversationLoaderData } from "~/routes/__app/messages.$recipient"
 import useSession from "~/features/core/hooks/use-session";
 
 export default function Conversation() {
-	const { currentPhoneNumber } = useSession();
+	const { phoneNumber } = useSession();
 	const params = useParams<{ recipient: string }>();
 	const recipient = decodeURIComponent(params.recipient ?? "");
 	const { conversation } = useLoaderData<ConversationLoaderData>();
@@ -21,15 +21,15 @@ export default function Conversation() {
 	if (transition.submission) {
 		messages.push({
 			id: "temp",
-			phoneNumberId: currentPhoneNumber.id,
-			from: currentPhoneNumber.number,
+			phoneNumberId: phoneNumber!.id,
+			from: phoneNumber!.number,
 			to: recipient,
 			sentAt: new Date(),
 			direction: Direction.Outbound,
 
 			status: "Queued",
-			content: transition.submission.formData.get("content")!.toString()
-		})
+			content: transition.submission.formData.get("content")!.toString(),
+		});
 	}
 
 	useEffect(() => {
@@ -91,7 +91,7 @@ export default function Conversation() {
 					})}
 				</ul>
 			</div>
-			<NewMessageArea />
+			<NewMessageArea recipient={recipient} />
 		</>
 	);
 }

app/features/messages/components/new-message-bottom-sheet.tsx

@@ -20,8 +20,8 @@ export default function NewMessageBottomSheet() {
 			onClose={() => setIsOpen(false)}
 			snapPoints={[0.5]}
 		>
-			<BottomSheet.Container>
-				<BottomSheet.Header>
+			<BottomSheet.Container onViewportBoxUpdate={null}>
+				<BottomSheet.Header onViewportBoxUpdate={null}>
 					<div className="w-full flex items-center justify-center p-4 text-black relative">
 						<span className="font-semibold text-base">New Message</span>
 
@@ -30,7 +30,7 @@ export default function NewMessageBottomSheet() {
 						</button>
 					</div>
 				</BottomSheet.Header>
-				<BottomSheet.Content>
+				<BottomSheet.Content onViewportBoxUpdate={null}>
 					<main className="flex flex-col h-full overflow-hidden">
 						<div className="flex items-center p-4 border-t border-b">
 							<span className="mr-4 text-[#333]">To:</span>
@@ -48,7 +48,7 @@ export default function NewMessageBottomSheet() {
 				</BottomSheet.Content>
 			</BottomSheet.Container>
 
-			<BottomSheet.Backdrop onTap={() => setIsOpen(false)} />
+			<BottomSheet.Backdrop onViewportBoxUpdate={null} onTap={() => setIsOpen(false)} />
 		</BottomSheet>
 	);
 }