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>{lastMessage.content}</div>
+								</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" });
+}

app/messages/queries/get-conversations.ts

@@ -1,5 +1,6 @@
 import { resolver, NotFoundError } from "blitz";
 import { z } from "zod";
+import PhoneNumber from "awesome-phonenumber";
 
 import db, { Direction, Message, Prisma } from "../../../db";
 import { decrypt } from "../../../db/_encryption";
@@ -33,6 +34,8 @@ export default resolver.pipe(
 			} else {
 				recipient = message.from;
 			}
+			const parsedPhoneNumber = new PhoneNumber(recipient);
+			recipient = parsedPhoneNumber.getNumber("international");
 
 			if (!conversations[recipient]) {
 				conversations[recipient] = [];

package-lock.json

@@ -3955,6 +3955,11 @@
 				"mini-svg-data-uri": "^1.2.3"
 			}
 		},
+		"@tailwindcss/line-clamp": {
+			"version": "0.2.1",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.2.1.tgz",
+			"integrity": "sha512-Hq2KJY1+T2v7jw/mnT3mnC7CKbp5kj1XTqzSb2xbEt1j+JkxIR6N3ijsN/WevZtsKJfVE1KOejA/3IRKuhZEsQ=="
+		},
 		"@tailwindcss/typography": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.4.1.tgz",
@@ -4340,6 +4345,12 @@
 			"resolved": "https://registry.npmjs.org/@types/long/-/long-4.0.1.tgz",
 			"integrity": "sha512-5tXH6Bx/kNGd3MgffdmP4dy2Z+G4eaXw0SE81Tq3BNadtnMR5/ySMzX4SLEzHJzSmPNn4HIdpQsBvXMUykr58w=="
 		},
+		"@types/luxon": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-2.0.1.tgz",
+			"integrity": "sha512-EqwKd+cuzQ6Jz/zsFYOofHzSfZSh1x3eBBj9+2IYk5vF3I1JnysPFK/I0YnkJ0artgvVY3jJYf2fGdIzoK0UIA==",
+			"dev": true
+		},
 		"@types/mdast": {
 			"version": "3.0.8",
 			"resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.8.tgz",
@@ -5227,6 +5238,11 @@
 				"queue-microtask": "^1.1.2"
 			}
 		},
+		"awesome-phonenumber": {
+			"version": "2.57.0",
+			"resolved": "https://registry.npmjs.org/awesome-phonenumber/-/awesome-phonenumber-2.57.0.tgz",
+			"integrity": "sha512-RWrCCQpnmkYeL3AGFdlUOpWkpkTauZm7FE9kgDz6xJG6PNUiiIm+rKI95wnre0TSV01PHvgFFwQZhDixPCM9ZA=="
+		},
 		"axe-core": {
 			"version": "4.3.2",
 			"resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.2.tgz",
@@ -7241,6 +7257,13 @@
 			"requires": {
 				"is-nan": "^1.3.2",
 				"luxon": "^1.26.0"
+			},
+			"dependencies": {
+				"luxon": {
+					"version": "1.28.0",
+					"resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
+					"integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ=="
+				}
 			}
 		},
 		"cross-fetch": {
@@ -13424,9 +13447,9 @@
 			"integrity": "sha1-tcg1G5Rky9dQM1p5ZQoOwOVhGN0="
 		},
 		"luxon": {
-			"version": "1.28.0",
+			"version": "2.0.2",
-			"resolved": "https://registry.npmjs.org/luxon/-/luxon-1.28.0.tgz",
+			"resolved": "https://registry.npmjs.org/luxon/-/luxon-2.0.2.tgz",
-			"integrity": "sha512-TfTiyvZhwBYM/7QdAVDh+7dBTBA29v4ik0Ce9zda3Mnf8on1S5KJI8P2jKFZ8+5C0jhmr0KwJEO/Wdpm0VeWJQ=="
+			"integrity": "sha512-ZRioYLCgRHrtTORaZX1mx+jtxKtKuI5ZDvHNAmqpUzGqSrR+tL4FVLn/CUGMA3h0+AKD1MAxGI5GnCqR5txNqg=="
 		},
 		"lz-string": {
 			"version": "1.4.4",

package.json

@@ -49,12 +49,15 @@
 		"@prisma/client": "2.29.1",
 		"@react-aria/interactions": "3.5.1",
 		"@tailwindcss/forms": "0.3.3",
+		"@tailwindcss/line-clamp": "0.2.1",
 		"@tailwindcss/typography": "0.4.1",
 		"@twilio/voice-sdk": "2.0.1",
+		"awesome-phonenumber": "2.57.0",
 		"blitz": "0.38.6",
 		"clsx": "1.1.1",
 		"got": "11.8.2",
 		"jotai": "1.3.0",
+		"luxon": "2.0.2",
 		"next-pwa": "5.3.1",
 		"pino": "6.13.0",
 		"pino-pretty": "5.1.3",
@@ -73,6 +76,7 @@
 		"zod": "3.7.3"
 	},
 	"devDependencies": {
+		"@types/luxon": "2.0.1",
 		"@types/pino": "6.3.11",
 		"@types/preview-email": "2.0.1",
 		"@types/react": "17.0.19",

tailwind.config.js

@@ -146,6 +146,6 @@ module.exports = {
 			translate: ["group-hover"],
 		},
 	},
-	plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
+	plugins: [require("@tailwindcss/line-clamp"), require("@tailwindcss/forms"), require("@tailwindcss/typography")],
 	purge: ["{pages,app}/**/*.{js,ts,jsx,tsx}"],
 };