shellphone.app/app/routes/__app/messages.tsx

import type { MetaFunction } from "@remix-run/node";
import { useLoaderData } from "superjson-remix";
import { atom, useAtom } from "jotai";

import messagesLoader, { type MessagesLoaderData } from "~/features/messages/loaders/messages";
import PageTitle from "~/features/core/components/page-title";
import MissingTwilioCredentials from "~/features/core/components/missing-twilio-credentials";
import ConversationsList from "~/features/messages/components/conversations-list";
import NewMessageButton from "~/features/messages/components/new-message-button";
import NewMessageBottomSheet from "~/features/messages/components/new-message-bottom-sheet";
import { getSeoMeta } from "~/utils/seo";

export const meta: MetaFunction = () => ({
	...getSeoMeta({ title: "Messages" }),
});

export const loader = messagesLoader;

export default function MessagesPage() {
	const { hasPhoneNumber } = useLoaderData<MessagesLoaderData>();
	const setIsNewMessageSheetOpen = useAtom(bottomSheetOpenAtom)[1];

	if (!hasPhoneNumber) {
		return (
			<>
				<MissingTwilioCredentials />
				<PageTitle className="filter blur-sm select-none absolute top-0" title="Messages" />
			</>
		);
	}

	return (
		<>
			<PageTitle title="Messages" />
			<section className="flex flex-grow flex-col">
				<ConversationsList />
			</section>
			<NewMessageButton onClick={() => setIsNewMessageSheetOpen(true)} />
			<NewMessageBottomSheet />
		</>
	);
}

export const bottomSheetOpenAtom = atom(false);