Jannis Braun
7ae3e8c687
- Implemented 'Overdrive' logic to force high bitrates on Chrome - Fixed 'Auto' preset to default to stable 720p60 - Added persistent 'Triple-Kick' hammer to prevent bitrate throttling - Fixed sidebar connection status sync - Added comprehensive diagnostic logger
54 lines
3.7 KiB
JavaScript
54 lines
3.7 KiB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
import { useMemo } from 'react';
|
|
import { useServerStore } from '../../stores/serverStore';
|
|
import { useUIStore } from '../../stores/uiStore';
|
|
import { Avatar } from '../ui/Avatar';
|
|
const ROLE_ORDER = { owner: 0, admin: 1, member: 2 };
|
|
const ROLE_LABELS = { owner: 'OWNER', admin: 'ADMIN', member: 'MEMBER' };
|
|
export function MemberSidebar() {
|
|
const members = useServerStore((s) => s.members);
|
|
const memberListOpen = useUIStore((s) => s.memberListOpen);
|
|
const openUserProfile = useUIStore((s) => s.openUserProfile);
|
|
const { roleGroups, offlineMembers } = useMemo(() => {
|
|
const online = members.filter(m => m.user.status !== 'offline');
|
|
const offline = members.filter(m => m.user.status === 'offline');
|
|
// Group online members by role
|
|
const groups = new Map();
|
|
for (const m of online) {
|
|
const role = m.role || 'member';
|
|
if (!groups.has(role))
|
|
groups.set(role, []);
|
|
groups.get(role).push(m);
|
|
}
|
|
// Sort groups by role hierarchy
|
|
const sorted = [...groups.entries()].sort((a, b) => (ROLE_ORDER[a[0]] ?? 99) - (ROLE_ORDER[b[0]] ?? 99));
|
|
return { roleGroups: sorted, offlineMembers: offline };
|
|
}, [members]);
|
|
if (!memberListOpen)
|
|
return null;
|
|
const roleColors = {
|
|
owner: 'text-discord-red',
|
|
admin: 'text-discord-blurple',
|
|
member: 'text-discord-text-primary',
|
|
};
|
|
const getMemberColor = (member) => {
|
|
if (member.roles && member.roles.length > 0) {
|
|
return { color: member.roles[0].color };
|
|
}
|
|
return undefined;
|
|
};
|
|
const handleMemberClick = (e, user) => {
|
|
e.stopPropagation();
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
openUserProfile(user, {
|
|
top: Math.min(rect.top, window.innerHeight - 450),
|
|
left: rect.left - 316,
|
|
});
|
|
};
|
|
const renderMember = (member, isOffline = false) => {
|
|
const displayName = member.user.displayName ?? member.user.username;
|
|
return (_jsxs("div", { onClick: (e) => handleMemberClick(e, member.user), className: "flex items-center gap-3 px-2 py-1.5 rounded-[4px] hover:bg-discord-modifier-hover cursor-pointer group transition-colors", children: [_jsx(Avatar, { src: member.user.avatar, name: displayName, size: 32, status: isOffline ? 'offline' : member.user.status, className: isOffline ? 'opacity-60' : undefined }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: `text-[15px] font-medium truncate ${isOffline ? 'text-discord-text-muted' : (!getMemberColor(member) ? (roleColors[member.role] ?? 'text-discord-text-primary') : '')}`, style: isOffline ? undefined : getMemberColor(member), children: displayName }), !isOffline && member.user.customStatus && (_jsx("div", { className: "text-[12px] text-discord-text-muted truncate", children: member.user.customStatus }))] })] }, member.userId));
|
|
};
|
|
return (_jsx("div", { className: "w-60 bg-discord-bg-members flex-shrink-0 overflow-y-auto select-none no-scrollbar", children: _jsxs("div", { className: "p-3", children: [roleGroups.map(([role, groupMembers]) => (_jsxs("div", { className: "mb-4", children: [_jsxs("h3", { className: "text-[12px] font-bold text-discord-text-muted uppercase tracking-wider px-2 mb-1", children: [ROLE_LABELS[role] ?? role.toUpperCase(), " \u2014 ", groupMembers.length] }), groupMembers.map((m) => renderMember(m))] }, role))), offlineMembers.length > 0 && (_jsxs("div", { children: [_jsxs("h3", { className: "text-[12px] font-bold text-discord-text-muted uppercase tracking-wider px-2 mb-1", children: ["OFFLINE \u2014 ", offlineMembers.length] }), offlineMembers.map((m) => renderMember(m, true))] }))] }) }));
|
|
}
|