From 0fe3f88a4a84047e223b19a329d5c366dc98b4e5 Mon Sep 17 00:00:00 2001
From: Alma <alma@MacBook-Air-de-Alma.local>
Date: Thu, 10 Apr 2025 00:31:21 +0200
Subject: [PATCH] update widget design

---
 components/parole.tsx | 46 ++++++++++++++++++++++++++++++++-----------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/components/parole.tsx b/components/parole.tsx
index 1bc7aedd..1b1167dc 100644
--- a/components/parole.tsx
+++ b/components/parole.tsx
@@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { RefreshCw } from "lucide-react";
 import { useRouter } from "next/navigation";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
 interface Message {
   _id: string;
@@ -15,6 +16,8 @@ interface Message {
     username: string;
     name?: string;
   };
+  roomName: string;
+  roomType: string;
 }
 
 export function Parole() {
@@ -66,15 +69,18 @@ export function Parole() {
 
   return (
     <Card 
-      className="transition-transform duration-500 ease-in-out transform hover:scale-105 cursor-pointer" 
+      className="transition-transform duration-500 ease-in-out transform hover:scale-105 cursor-pointer bg-white/50 backdrop-blur-sm" 
       onClick={() => router.push('/parole')}
     >
-      <CardHeader className="flex flex-row items-center justify-between">
-        <CardTitle>Parole Messages</CardTitle>
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-lg font-semibold">Talk mentions</CardTitle>
         <Button 
           variant="ghost" 
           size="icon"
-          onClick={() => fetchMessages(true)}
+          onClick={(e) => {
+            e.stopPropagation();
+            fetchMessages(true);
+          }}
           disabled={refreshing}
           className={refreshing ? 'animate-spin' : ''}
         >
@@ -88,7 +94,10 @@ export function Parole() {
             <p className="text-red-500">Error: {error}</p>
             <Button 
               variant="outline" 
-              onClick={() => fetchMessages(true)}
+              onClick={(e) => {
+                e.stopPropagation();
+                fetchMessages(true);
+              }}
               className="mt-2"
             >
               Try Again
@@ -96,17 +105,30 @@ export function Parole() {
           </div>
         )}
         {!loading && !error && (
-          <div className="space-y-4 max-h-[500px] overflow-y-auto">
+          <div className="space-y-3 max-h-[400px] overflow-y-auto">
             {messages.length === 0 ? (
               <p className="text-center text-muted-foreground">No messages found</p>
             ) : (
               messages.map((message) => (
-                <div key={message._id} className="border-b pb-2">
-                  <p className="font-medium">{message.u.name || message.u.username}</p>
-                  <p className="text-sm whitespace-pre-wrap">{message.msg}</p>
-                  <p className="text-xs text-muted-foreground">
-                    {new Date(message.ts).toLocaleString()}
-                  </p>
+                <div key={message._id} className="flex items-start space-x-3 hover:bg-gray-50 p-2 rounded-lg transition-colors">
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage src={`https://ui-avatars.com/api/?name=${encodeURIComponent(message.u.name || message.u.username)}&background=random`} />
+                    <AvatarFallback>{(message.u.name || message.u.username).substring(0, 2).toUpperCase()}</AvatarFallback>
+                  </Avatar>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-baseline">
+                      <p className="text-sm font-medium truncate">{message.u.name || message.u.username}</p>
+                      <span className="ml-2 text-xs text-gray-500">
+                        {new Date(message.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                      </span>
+                    </div>
+                    <p className="text-sm text-gray-600 whitespace-pre-wrap line-clamp-2">{message.msg}</p>
+                    {message.roomName && (
+                      <p className="text-xs text-blue-500 mt-1">
+                        in {message.roomName}
+                      </p>
+                    )}
+                  </div>
                 </div>
               ))
             )}