- {status === "online" &&
}
- {status === "dnd" &&
}
- {status === "idle" &&
}
- {status === "offline" &&
}
+
+
+
+ {statusIndicatorIcon}
);
diff --git a/app/components/custom-ui/private-channel-list-item.tsx b/app/components/custom-ui/private-channel-list-item.tsx
index 773e6bd..120978d 100644
--- a/app/components/custom-ui/private-channel-list-item.tsx
+++ b/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",
)}
>
recipient.id !== currentUserId)}
+ user={recipientsUsers.find((recipient) => recipient.id !== currentUserId)}
/>
- {recipients.map((recipient) => recipient.displayName || recipient.username).join(", ")}
+ {recipientsUsers
+ .map((recipient) => recipient.displayName || recipient.username)
+ .join(", ")}
{renderSystemBadge && (
diff --git a/app/components/custom-ui/server-button.tsx b/app/components/custom-ui/server-button.tsx
index 354c19d..9ca21db 100644
--- a/app/components/custom-ui/server-button.tsx
+++ b/app/components/custom-ui/server-button.tsx
@@ -1,7 +1,7 @@
import { Avatar, AvatarFallback, AvatarImage } from "@radix-ui/react-avatar";
import { NavLink } from "react-router";
import type { Server } from "~/lib/api/types";
-import { getFirstLetters } from "~/lib/utils";
+import { cn, getFirstLetters } from "~/lib/utils";
import { Button } from "../ui/button";
export interface ServerButtonProps {
@@ -12,13 +12,11 @@ export function ServerButton({ server }: ServerButtonProps) {
return (
{({ isActive }) => (
-