.

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

@@ -2,6 +2,7 @@ import { ChevronDown, Hash, Volume2 } from "lucide-react";
 import React from "react";
 import { NavLink } from "react-router";
 import { useShallow } from "zustand/react/shallow";
+import { useFetchUsers } from "~/hooks/use-fetch-user";
 import { deleteChannel } from "~/lib/api/client/server";
 import { ChannelType, type ServerChannel } from "~/lib/api/types";
 import { cn } from "~/lib/utils";
@@ -12,6 +13,7 @@ import { useVoiceStateStore } from "~/stores/voice-state-store";
 import { Button } from "../ui/button";
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "../ui/context-menu";
 import UserAvatar from "../user-avatar";
+import UserContextMenu from "../user-context-menu";
 
 interface ChannelListItemProps {
     channel: ServerChannel;
@@ -21,6 +23,64 @@ const onDeleteChannel = async (channel: ServerChannel) => {
     const response = await deleteChannel(channel.serverId, channel.id);
 };
 
+interface ChannelItemWrapperProps {
+    channel: ServerChannel;
+    icon: React.ReactNode;
+    onButtonClick?: () => void; // For direct button clicks (e.g., join voice)
+    navTo?: string; // If provided, the button becomes a NavLink
+    isExplicitlyActive?: boolean; // To set active state externally (e.g., current voice channel)
+}
+
+function ChannelItemWrapper({ channel, icon, onButtonClick, navTo, isExplicitlyActive }: ChannelItemWrapperProps) {
+    const buttonInnerContent = (
+        <div className="flex items-center gap-2 max-w-72">
+            <div>{icon}</div>
+            <div className="truncate">{channel.name}</div>
+        </div>
+    );
+
+    const renderButton = (isNavLinkActive?: boolean) => {
+        // Active state priority: explicit prop > NavLink state > default (false)
+        const isActive = isExplicitlyActive ?? isNavLinkActive ?? false;
+        return (
+            <Button
+                variant="secondary"
+                size="sm"
+                className={cn(
+                    "justify-start w-full shadow-sm",
+                    isActive ? "bg-accent hover:bg-accent" : "bg-secondary",
+                )}
+                onClick={!navTo ? onButtonClick : undefined}
+            >
+                {buttonInnerContent}
+            </Button>
+        );
+    };
+
+    let triggerContent: React.ReactNode;
+    if (navTo) {
+        triggerContent = (
+            <NavLink to={navTo} discover="none">
+                {({ isActive: navLinkIsActive }) => renderButton(navLinkIsActive)}
+            </NavLink>
+        );
+    } else {
+        // For non-NavLink cases (like voice channel), active state is determined by isExplicitlyActive
+        triggerContent = renderButton();
+    }
+
+    return (
+        <ContextMenu>
+            <ContextMenuTrigger asChild>{triggerContent}</ContextMenuTrigger>
+            <ContextMenuContent>
+                <ContextMenuItem variant="destructive" onClick={() => onDeleteChannel(channel)}>
+                    Delete
+                </ContextMenuItem>
+            </ContextMenuContent>
+        </ContextMenu>
+    );
+}
+
 function ServerCategory({ channel }: ChannelListItemProps) {
     return (
         <div className="text-xs flex flex-row justify-between mt-4">
@@ -39,52 +99,43 @@ function ServerVoice({ channel }: ChannelListItemProps) {
     const voiceStateChannel = useVoiceStateStore((state) => state.activeChannel);
     const channelVoiceState = useChannelsVoiceStateStore((state) => state.channels[channel.id]) || {};
     const userIds = Object.keys(channelVoiceState.users ?? {});
+    useFetchUsers(userIds);
 
-    const { users, fetchUsersIfNotPresent } = useUsersStore(
-        useShallow((state) => ({
-            users: state.users,
-            fetchUsersIfNotPresent: state.fetchUsersIfNotPresent,
-        })),
-    );
+    const users = useUsersStore(useShallow((state) => state.users));
 
     const channelUsers = React.useMemo(() => userIds.map((userId) => users[userId]).filter(Boolean), [userIds, users]);
 
-    React.useEffect(() => {
-        fetchUsersIfNotPresent(userIds);
-    }, [userIds]);
-
-    const onClick = () => {
-        if (voiceStateChannel?.serverId === channel.serverId && voiceStateChannel.channelId === channel.id) return;
+    const isCurrentVoiceChannel =
+        voiceStateChannel?.serverId === channel.serverId && voiceStateChannel.channelId === channel.id;
 
+    const handleJoinVoiceChannel = () => {
+        if (isCurrentVoiceChannel) return;
         updateVoiceState(channel.serverId, channel.id);
     };
 
     return (
         <>
-            <ContextMenu>
-                <ContextMenuTrigger asChild>
-                    <Button variant="secondary" size="sm" className="justify-start" onClick={onClick}>
-                        <div className="flex items-center gap-2 max-w-72">
-                            <div>
-                                <Volume2 />
-                            </div>
-                            <div className="truncate">{channel.name}</div>
-                        </div>
-                    </Button>
-                </ContextMenuTrigger>
-                <ContextMenuContent>
-                    <ContextMenuItem variant="destructive" onClick={() => onDeleteChannel(channel)}>
-                        Delete
-                    </ContextMenuItem>
-                </ContextMenuContent>
-            </ContextMenu>
+            <ChannelItemWrapper
+                channel={channel}
+                icon={<Volume2 />}
+                onButtonClick={handleJoinVoiceChannel}
+                isExplicitlyActive={isCurrentVoiceChannel}
+            />
             {channelUsers.length > 0 && (
-                <div className="ml-2 border-l-2 flex flex-col gap-1">
+                <div className="ml-2 border-l-2 flex flex-col gap-1 pl-4 py-1">
+                    {" "}
+                    {/* Added py-1 for spacing */}
                     {channelUsers.map((user) => (
-                        <div key={user.id} className="flex items-center gap-2 max-w-72 pl-4">
-                            <UserAvatar user={user} className="size-6" />
-                            {user.displayName || user.username}
-                        </div>
+                        <React.Fragment key={user.id}>
+                            <UserContextMenu userId={user.id}>
+                                <div className="flex items-center gap-2 max-w-72 p-1 hover:bg-secondary/80 rounded">
+                                    {" "}
+                                    {/* Added padding and hover for better UX */}
+                                    <UserAvatar user={user} className="size-6" />
+                                    {user.displayName || user.username}
+                                </div>
+                            </UserContextMenu>
+                        </React.Fragment>
                     ))}
                 </div>
             )}
@@ -94,34 +145,7 @@ function ServerVoice({ channel }: ChannelListItemProps) {
 
 function ServerText({ channel }: ChannelListItemProps) {
     return (
-        <NavLink to={`/app/server/${channel.serverId}/${channel.id}`} discover="none">
-            {({ isActive }) => (
-                <ContextMenu>
-                    <ContextMenuTrigger asChild>
-                        <Button
-                            variant="secondary"
-                            size="sm"
-                            className={cn(
-                                "justify-start w-full",
-                                isActive ? "bg-accent hover:bg-accent" : "bg-secondary",
-                            )}
-                        >
-                            <div className="flex items-center gap-2 max-w-72">
-                                <div>
-                                    <Hash />
-                                </div>
-                                <div className="truncate">{channel.name}</div>
-                            </div>
-                        </Button>
-                    </ContextMenuTrigger>
-                    <ContextMenuContent>
-                        <ContextMenuItem variant="destructive" onClick={() => onDeleteChannel(channel)}>
-                            Delete
-                        </ContextMenuItem>
-                    </ContextMenuContent>
-                </ContextMenu>
-            )}
-        </NavLink>
+        <ChannelItemWrapper channel={channel} icon={<Hash />} navTo={`/app/server/${channel.serverId}/${channel.id}`} />
     );
 }