feat: draft update ui

ui/src/app/messages.tsx

@@ -1,13 +1,19 @@
 import { useWAClient } from "./context";
-import { getFormattedName, getId, getInitial } from "@/lib/utils";
+import { getFormattedName, getId } from "@/lib/utils";
 import type { ChatDTO } from "@shared/dto";
 import { useQuery } from "@tanstack/react-query";
 import { cn } from "cn";
-import { ArrowLeftIcon, PaperclipIcon, SendIcon } from "lucide-react";
+import {
+  ArrowLeftIcon,
+  PaperclipIcon,
+  PhoneCallIcon,
+  SendIcon,
+} from "lucide-react";
 import React, { useMemo, useState } from "react";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import MessageMedia from "@/components/message-media";
+import Avatar from "@/components/ui/avatar";
 
 dayjs.extend(relativeTime);
 
@@ -42,8 +48,8 @@ export default function MessagesSection({
 
   const messageList = useMemo(() => {
     return messages
-      ?.filter((i) => !["call_log", "revoked"].includes(i.type as never))
-      .map((message) => {
+      ?.filter((i) => !["revoked"].includes(i.type as never))
+      ?.map((message) => {
         const from = contacts?.find(
           (c) => getId(c.id) === getId(message.author || message.from),
         );
@@ -81,18 +87,13 @@ export default function MessagesSection({
           <button
             aria-label="Back to conversations"
             onClick={() => setMobileChat(false)}
-            className="grid size-9 place-items-center rounded-full text-muted-foreground hover:bg-muted md:hidden"
+            className="grid size-9 place-items-center rounded-full text-muted-foreground hover:bg-muted md:hidden cursor-pointer"
           >
             <ArrowLeftIcon size={19} />
           </button>
 
-          <div
-            className={cn(
-              "grid size-10 shrink-0 place-items-center rounded-full text-sm font-semibold",
-            )}
-          >
-            {getInitial(chat.formattedTitle)}
-          </div>
+          <Avatar name={chat.formattedTitle || chat.name} className="size-10" />
+
           <div className="min-w-0">
             <h2 className="truncate text-sm font-semibold">
               {chat.formattedTitle || chat.name}
@@ -175,6 +176,13 @@ export default function MessagesSection({
                   </p>
                 ) : null}
 
+                {item.type === "call_log" && (
+                  <div className="flex items-center gap-2 pt-3 pb-2 px-2">
+                    <PhoneCallIcon className="size-5" />
+                    <p className="text-sm italic">Call log</p>
+                  </div>
+                )}
+
                 <div
                   className={`mt-1 flex items-center justify-end gap-1 text-[10px] ${item.fromMe ? "text-primary" : "text-muted-foreground"}`}
                 >