.

app/components/custom-ui/private-channel-list-item.tsx

@@ -1,5 +1,7 @@
 import { Check } from "lucide-react";
 import { NavLink } from "react-router";
+import { useShallow } from "zustand/react/shallow";
+import { useFetchUsers } from "~/hooks/use-fetch-user";
 import type { RecipientChannel } from "~/lib/api/types";
 import { cn } from "~/lib/utils";
 import { useUsersStore } from "~/stores/users-store";
@@ -14,8 +16,16 @@ interface PrivateChannelListItemProps {
 
 export default function PrivateChannelListItem({ channel }: PrivateChannelListItemProps) {
     const currentUserId = useUsersStore((state) => state.currentUserId);
-    const recipients = channel.recipients.filter((recipient) => recipient.id !== currentUserId);
-    const renderSystemBadge = recipients.some((recipient) => recipient.system) && recipients.length === 1;
+
+    const recipients = channel.recipients.filter((recipient) => recipient !== currentUserId);
+
+    useFetchUsers(recipients);
+
+    const recipientsUsers = useUsersStore(
+        useShallow((state) => recipients.map((recipient) => state.users[recipient]).filter(Boolean)),
+    );
+
+    const renderSystemBadge = recipientsUsers.some((recipient) => recipient.system) && recipients.length === 1;
 
     return (
         <>
@@ -26,20 +36,22 @@ export default function PrivateChannelListItem({ channel }: PrivateChannelListIt
                         size="none"
                         asChild
                         className={cn(
+                            "w-full flex flex-row justify-start shadow-sm",
                             isActive ? "bg-accent hover:bg-accent" : "",
-                            "w-full flex flex-row justify-start",
                         )}
                     >
                         <div className="flex items-center gap-2 max-w-72 p-2">
                             <div>
                                 <OnlineStatus status="online">
                                     <UserAvatar
-                                        user={channel.recipients.find((recipient) => recipient.id !== currentUserId)}
+                                        user={recipientsUsers.find((recipient) => recipient.id !== currentUserId)}
                                     />
                                 </OnlineStatus>
                             </div>
                             <div className="truncate">
-                                {recipients.map((recipient) => recipient.displayName || recipient.username).join(", ")}
+                                {recipientsUsers
+                                    .map((recipient) => recipient.displayName || recipient.username)
+                                    .join(", ")}
                             </div>
                             {renderSystemBadge && (
                                 <Badge variant="default">