Message Inbox Item

1import React from 'react';
2import { UserInfo } from './user-info';
3import { Timestamp } from './timestamp';
4import { cn } from '@/lib/utils/deso';
5import { ActionMenu, ActionMenuItem } from './action-menu';
6import { MoreHorizontal, Check, Archive } from 'lucide-react';
7 
8export interface MessageInboxItemProps {
9  publicKey: string;
10  lastMessage: string;
11  lastTimestamp: string | Date;
12  unreadCount?: number;
13  selected?: boolean;
14  onClick?: () => void;
15  className?: string;
16  onMarkAsRead?: () => void;
17  onArchive?: () => void;
18}
19 
20export function MessageInboxItem({
21  publicKey,
22  lastMessage,
23  lastTimestamp,
24  unreadCount = 0,
25  selected = false,
26  onClick,
27  className,
28  onMarkAsRead,
29  onArchive,
30}: MessageInboxItemProps) {
31  const handleMenuInteraction = (e: React.MouseEvent) => {
32    e.stopPropagation();
33  };
34 
35  return (
36    <div
37      className={cn(
38        'group relative flex items-center gap-2 p-2 cursor-pointer hover:bg-background/50',
39        selected &&
40          'bg-accent border-b border-border/50 bg-background hover:bg-background',
41        !selected && 'border-b border-border/50',
42        className
43      )}
44      onClick={onClick}
45    >
46      <UserInfo
47        publicKey={publicKey}
48        pictureSize="lg"
49        usernameClassName="text-xs"
50      >
51        <div className="flex items-center gap-2 mt-0.5">
52          <span className="truncate text-xs text-muted-foreground max-w-[220px]">
53            {lastMessage}
54          </span>
55          {unreadCount > 0 && (
56            <span
57              className="ml-1 inline-block w-1 h-1 rounded-full bg-red-500 absolute right-3 top-3"
58              title={`${unreadCount} unread`}
59            />
60          )}
61        </div>
62        <Timestamp
63          timestamp={lastTimestamp}
64          className="w-fit text-[10px] text-muted-foreground mt-0.5"
65          format="relative"
66        />
67      </UserInfo>
68 
69      <div
70        className="ml-auto opacity-0 group-hover:opacity-100 transition-opacity"
71        onClick={handleMenuInteraction}
72      >
73        <ActionMenu
74          trigger={
75            <div className="p-1.5 rounded-full hover:bg-accent">
76              <MoreHorizontal size={16} />
77            </div>
78          }
79          align="end"
80        >
81          {unreadCount > 0 && onMarkAsRead && (
82            <ActionMenuItem icon={Check} onClick={onMarkAsRead}>
83              Mark as read
84            </ActionMenuItem>
85          )}
86          {onArchive && (
87// … truncated