format phone number and clamp message preview to 2 lines in conversations list

app/messages/components/conversations-list.tsx

@@ -1,4 +1,7 @@
 import { Link, useQuery, Routes } from "blitz";
+import { DateTime } from "luxon";
+import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import getConversationsQuery from "../queries/get-conversations";
 
@@ -14,7 +17,7 @@ export default function ConversationsList() {
 			{Object.entries(conversations).map(([recipient, messages]) => {
 				const lastMessage = messages[messages.length - 1]!;
 				return (
-					<li key={recipient} className="py-2">
+					<li key={recipient} className="py-2 p-4">
 						<Link
 							href={Routes.ConversationPage({
 								recipient: encodeURIComponent(recipient),
@@ -23,9 +26,12 @@ export default function ConversationsList() {
 							<a className="flex flex-col">
 								<div className="flex flex-row justify-between">
 									<strong>{recipient}</strong>
-									<div>{new Date(lastMessage.sentAt).toLocaleString("fr-FR")}</div>
+									<div className="text-gray-700 flex flex-row gap-x-1">
+										{formatMessageDate(lastMessage.sentAt)}
+										<FontAwesomeIcon className="w-4 h-4 my-auto" icon={faChevronRight} />
+									</div>
 								</div>
-								<div>{lastMessage.content}</div>
+								<div className="line-clamp-2 text-gray-700">{lastMessage.content}</div>
 							</a>
 						</Link>
 					</li>
@@ -34,3 +40,20 @@ export default function ConversationsList() {
 		</ul>
 	);
 }
+
+function formatMessageDate(date: Date): string {
+	const messageDate = DateTime.fromJSDate(date);
+	const diff = messageDate.diffNow("days");
+
+	const isToday = diff.days > -1;
+	if (isToday) {
+		return messageDate.toFormat("HH:mm", { locale: "fr-FR" });
+	}
+
+	const isDuringLastWeek = diff.days > -8;
+	if (isDuringLastWeek) {
+		return messageDate.weekdayLong;
+	}
+
+	return messageDate.toFormat("dd/MM/yyyy", { locale: "fr-FR" });
+}