Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace mobile agent card slider with horizontal swipe carousel and improve messaging header responsiveness

Browse Source
This commit is contained in:
pradeepkumar
2026-04-18 11:32:45 +05:30
parent ff17bab0db
commit 396d68649f
6 changed files with 60 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/app/(agent)/agent/network/component/ConnectionCard.tsx
View File

@@ -33,14 +33,14 @@ export function ConnectionCard({
const isPlaceholder = !avatar || avatar === placeholder;
return (
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 py-4">
<div className="flex flex-row items-center gap-3 sm:gap-4 py-4">
{/* Avatar */}
<div className="flex-shrink-0">
<div className="w-[80px] h-[80px] rounded-full overflow-hidden relative bg-[#e8e8e8]">
<div className="w-[56px] h-[56px] sm:w-[80px] sm:h-[80px] rounded-full overflow-hidden relative bg-[#e8e8e8]">
{/* Shimmer while loading, initials only on error */}
{avatarError || isPlaceholder ? (
<div className="absolute inset-0 rounded-full bg-[#c4d9d4] flex items-center justify-center">
<span className="font-bold text-[#00293d] text-[32px]">{name?.[0]?.toUpperCase() || '?'}</span>
<span className="font-bold text-[#00293d] text-[22px] sm:text-[32px]">{name?.[0]?.toUpperCase() || '?'}</span>
</div>
) : !avatarLoaded ? (
<div className="absolute inset-0 rounded-full shimmer-loading" />
@@ -58,40 +58,37 @@ export function ConnectionCard({
</div>
</div>
{/* Content */}
<div className="flex-1 min-w-0">
{/* Name */}
<h3 className="font-serif font-bold text-[14px] leading-[19px] text-[#00293D] mb-1">
{name}
</h3>
{/* Email */}
<p className="font-serif font-normal text-[13px] leading-[18px] text-[#00293D]/70 mb-1">
{email}
</p>
{/* Connected date */}
{connectedAt && (
<p className="font-serif font-normal text-[12px] text-[#00293D]/50">
Connected on {formatDate(connectedAt)}
{/* Content + Message button (stacks on mobile, inline on desktop) */}
<div className="flex-1 min-w-0 flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
<div className="flex-1 min-w-0">
<h3 className="font-serif font-bold text-[14px] leading-[19px] text-[#00293D] mb-1 truncate">
{name}
</h3>
<p className="font-serif font-normal text-[13px] leading-[18px] text-[#00293D]/70 mb-1 truncate">
{email}
</p>
)}
</div>
{connectedAt && (
<p className="font-serif font-normal text-[12px] text-[#00293D]/50">
Connected on {formatDate(connectedAt)}
</p>
)}
</div>
{/* Action Buttons */}
<div className="flex items-center gap-3 flex-shrink-0">
<button
onClick={() => onMessage?.(id)}
className="h-[27px] px-4 rounded-[15px] bg-[#e58625] font-fractul font-medium text-[14px] text-[#00293D] hover:bg-[#d47920] transition-colors cursor-pointer flex items-center gap-2"
>
<Image
src="/assets/icons/message-dark-icon.svg"
alt="Message"
width={14}
height={13}
/>
Message
</button>
{/* Action Button */}
<div className="flex items-center gap-3 flex-shrink-0">
<button
onClick={() => onMessage?.(id)}
className="h-[27px] px-4 rounded-[15px] bg-[#e58625] font-fractul font-medium text-[14px] text-[#00293D] hover:bg-[#d47920] transition-colors cursor-pointer flex items-center gap-2"
>
<Image
src="/assets/icons/message-dark-icon.svg"
alt="Message"
width={14}
height={13}
/>
Message
</button>
</div>
</div>
</div>
);