69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
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";
|
|
import { Badge } from "../ui/badge";
|
|
import { Button } from "../ui/button";
|
|
import UserAvatar from "../user-avatar";
|
|
import { OnlineStatus } from "./online-status";
|
|
|
|
interface PrivateChannelListItemProps {
|
|
channel: RecipientChannel;
|
|
}
|
|
|
|
export default function PrivateChannelListItem({ channel }: PrivateChannelListItemProps) {
|
|
const currentUserId = useUsersStore((state) => state.currentUserId);
|
|
|
|
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 (
|
|
<>
|
|
<NavLink to={`/app/@me/channels/${channel.id}`}>
|
|
{({ isActive }) => (
|
|
<Button
|
|
variant="secondary"
|
|
size="none"
|
|
asChild
|
|
className={cn(
|
|
"w-full flex flex-row justify-start shadow-sm",
|
|
isActive ? "bg-accent hover:bg-accent" : "",
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2 max-w-72 p-2">
|
|
<div>
|
|
<OnlineStatus status="online">
|
|
<UserAvatar
|
|
user={recipientsUsers.find((recipient) => recipient.id !== currentUserId)}
|
|
/>
|
|
</OnlineStatus>
|
|
</div>
|
|
<div className="truncate">
|
|
{recipientsUsers
|
|
.map((recipient) => recipient.displayName || recipient.username)
|
|
.join(", ")}
|
|
</div>
|
|
{renderSystemBadge && (
|
|
<Badge variant="default">
|
|
{" "}
|
|
<Check /> System
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</Button>
|
|
)}
|
|
</NavLink>
|
|
</>
|
|
);
|
|
}
|