university/diplom-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Lionarius
2025-05-21 08:52:33 +03:00
parent e992d388fb
commit 4e5fca2402
68 changed files with 358 additions and 1398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
app/components/custom-ui/channel-list-item.tsx
View File

@@ -10,12 +10,7 @@ import { useGatewayStore } from "~/stores/gateway-store";
import { useUsersStore } from "~/stores/users-store";
import { useVoiceStateStore } from "~/stores/voice-state-store";
import { Button } from "../ui/button";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "../ui/context-menu";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "../ui/context-menu";
import UserAvatar from "../user-avatar";
interface ChannelListItemProps {
@@ -41,11 +36,8 @@ function ServerCategory({ channel }: ChannelListItemProps) {
function ServerVoice({ channel }: ChannelListItemProps) {
const updateVoiceState = useGatewayStore((state) => state.updateVoiceState);
const voiceStateChannel = useVoiceStateStore(
(state) => state.activeChannel,
);
const channelVoiceState =
useChannelsVoiceStateStore((state) => state.channels[channel.id]) || {};
const voiceStateChannel = useVoiceStateStore((state) => state.activeChannel);
const channelVoiceState = useChannelsVoiceStateStore((state) => state.channels[channel.id]) || {};
const userIds = Object.keys(channelVoiceState.users ?? {});
const { users, fetchUsersIfNotPresent } = useUsersStore(
@@ -55,21 +47,14 @@ function ServerVoice({ channel }: ChannelListItemProps) {
})),
);
const channelUsers = React.useMemo(
() => userIds.map((userId) => users[userId]).filter(Boolean),
[userIds, 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;
if (voiceStateChannel?.serverId === channel.serverId && voiceStateChannel.channelId === channel.id) return;
updateVoiceState(channel.serverId, channel.id);
};
@@ -78,12 +63,7 @@ function ServerVoice({ channel }: ChannelListItemProps) {
<>
<ContextMenu>
<ContextMenuTrigger asChild>
<Button
variant="secondary"
size="sm"
className="justify-start"
onClick={onClick}
>
<Button variant="secondary" size="sm" className="justify-start" onClick={onClick}>
<div className="flex items-center gap-2 max-w-72">
<div>
<Volume2 />
@@ -93,10 +73,7 @@ function ServerVoice({ channel }: ChannelListItemProps) {
</Button>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
variant="destructive"
onClick={() => onDeleteChannel(channel)}
>
<ContextMenuItem variant="destructive" onClick={() => onDeleteChannel(channel)}>
Delete
</ContextMenuItem>
</ContextMenuContent>
@@ -104,10 +81,7 @@ function ServerVoice({ channel }: ChannelListItemProps) {
{channelUsers.length > 0 && (
<div className="ml-2 border-l-2 flex flex-col gap-1">
{channelUsers.map((user) => (
<div
key={user.id}
className="flex items-center gap-2 max-w-72 pl-4"
>
<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>
@@ -120,10 +94,7 @@ function ServerVoice({ channel }: ChannelListItemProps) {
function ServerText({ channel }: ChannelListItemProps) {
return (
<NavLink
to={`/app/server/${channel.serverId}/${channel.id}`}
discover="none"
>
<NavLink to={`/app/server/${channel.serverId}/${channel.id}`} discover="none">
{({ isActive }) => (
<ContextMenu>
<ContextMenuTrigger asChild>
@@ -132,9 +103,7 @@ function ServerText({ channel }: ChannelListItemProps) {
size="sm"
className={cn(
"justify-start w-full",
isActive
? "bg-accent hover:bg-accent"
: "bg-secondary",
isActive ? "bg-accent hover:bg-accent" : "bg-secondary",
)}
>
<div className="flex items-center gap-2 max-w-72">
@@ -146,10 +115,7 @@ function ServerText({ channel }: ChannelListItemProps) {
</Button>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
variant="destructive"
onClick={() => onDeleteChannel(channel)}
>
<ContextMenuItem variant="destructive" onClick={() => onDeleteChannel(channel)}>
Delete
</ContextMenuItem>
</ContextMenuContent>
@@ -159,9 +125,7 @@ function ServerText({ channel }: ChannelListItemProps) {
);
}
export default function ServerChannelListItem({
channel,
}: ChannelListItemProps) {
export default function ServerChannelListItem({ channel }: ChannelListItemProps) {
switch (channel.type) {
case ChannelType.SERVER_CATEGORY:
return <ServerCategory channel={channel} />;