feat: update ui

ui/src/components/message-media.tsx

@@ -1,6 +1,7 @@
 import { useWAClient } from "@/app/context";
 import { storage } from "@/lib/storage";
 import type { MessageDTO } from "@shared/dto";
+import { cn } from "cn";
 import { DownloadIcon, Loader2Icon, PaperclipIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 
@@ -85,9 +86,16 @@ export default function MessageMedia({ data }: Props) {
       <a
         href="#"
         onClick={() => openMedia()}
-        className="w-full max-w-40 block relative overflow-hidden"
+        className="w-full h-32 aspect-video block relative overflow-hidden"
       >
-        <img src={body || ""} alt="" className="w-full" />
+        <img
+          src={body || ""}
+          alt=""
+          className={cn(
+            "w-full h-full object-cover",
+            !isDownloaded && "blur-sm",
+          )}
+        />
 
         {isLoading && (
           <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
@@ -108,7 +116,7 @@ export default function MessageMedia({ data }: Props) {
     );
   }
 
-  if (type === "document") {
+  if (type === "document" || type === "ptt") {
     return (
       <button
         onClick={() => openMedia()}
@@ -122,7 +130,9 @@ export default function MessageMedia({ data }: Props) {
         ) : (
           <DownloadIcon className="size-4" />
         )}
-        <span className="text-xs truncate">{data.filename}</span>
+        <span className="text-xs truncate">
+          {type === "ptt" ? `Voice note (${data.duration}s)` : data.filename}
+        </span>
         <span className="text-xs">{readableBytes(data.size || 0)}</span>
       </button>
     );

ui/src/components/ui/avatar.tsx

@@ -4,6 +4,7 @@ import { UserIcon } from "lucide-react";
 
 type Props = {
   name?: string | null;
+  icon?: React.ReactNode;
   className?: string;
   iconClassName?: string;
 };
@@ -33,7 +34,12 @@ function getColorBasedOnName(name?: string | null) {
   return colorSchemes[getInitial(name).charCodeAt(0) % colorSchemes.length];
 }
 
-export default function Avatar({ name, className, iconClassName }: Props) {
+export default function Avatar({
+  name,
+  icon,
+  className,
+  iconClassName,
+}: Props) {
   const color = getColorBasedOnName(name);
 
   return (
@@ -44,7 +50,9 @@ export default function Avatar({ name, className, iconClassName }: Props) {
         className,
       )}
     >
-      {name ? (
+      {icon ? (
+        icon
+      ) : name ? (
         getInitial(name)
       ) : (
         <UserIcon className={cn("size-4", iconClassName)} />