alma/NeahFront3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update widget design

Browse Source
This commit is contained in:
Alma 2025-04-10 00:31:21 +02:00
parent 3d2e376927
commit 0fe3f88a4a
1 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
components/parole.tsx
View File

@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { RefreshCw } from "lucide-react"; import { RefreshCw } from "lucide-react";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
interface Message { interface Message {
_id: string; _id: string;
@ -15,6 +16,8 @@ interface Message {
username: string; username: string;
name?: string; name?: string;
}; };
roomName: string;
roomType: string;
} }
export function Parole() { export function Parole() {
@ -66,15 +69,18 @@ export function Parole() {
return ( return (
<Card <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')} onClick={() => router.push('/parole')}
> >
<CardHeader className="flex flex-row items-center justify-between"> <CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle>Parole Messages</CardTitle> <CardTitle className="text-lg font-semibold">Talk mentions</CardTitle>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => fetchMessages(true)} onClick={(e) => {
e.stopPropagation();
fetchMessages(true);
}}
disabled={refreshing} disabled={refreshing}
className={refreshing ? 'animate-spin' : ''} className={refreshing ? 'animate-spin' : ''}
> >
@ -88,7 +94,10 @@ export function Parole() {
<p className="text-red-500">Error: {error}</p> <p className="text-red-500">Error: {error}</p>
<Button <Button
variant="outline" variant="outline"
onClick={() => fetchMessages(true)} onClick={(e) => {
e.stopPropagation();
fetchMessages(true);
}}
className="mt-2" className="mt-2"
> >
Try Again Try Again
@ -96,17 +105,30 @@ export function Parole() {
</div> </div>
)} )}
{!loading && !error && ( {!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 ? ( {messages.length === 0 ? (
<p className="text-center text-muted-foreground">No messages found</p> <p className="text-center text-muted-foreground">No messages found</p>
) : ( ) : (
messages.map((message) => ( messages.map((message) => (
<div key={message._id} className="border-b pb-2"> <div key={message._id} className="flex items-start space-x-3 hover:bg-gray-50 p-2 rounded-lg transition-colors">
<p className="font-medium">{message.u.name || message.u.username}</p> <Avatar className="h-8 w-8">
<p className="text-sm whitespace-pre-wrap">{message.msg}</p> <AvatarImage src={`https://ui-avatars.com/api/?name=${encodeURIComponent(message.u.name || message.u.username)}&background=random`} />
<p className="text-xs text-muted-foreground"> <AvatarFallback>{(message.u.name || message.u.username).substring(0, 2).toUpperCase()}</AvatarFallback>
{new Date(message.ts).toLocaleString()} </Avatar>
</p> <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> </div>
)) ))
)} )}