Fixed the roles add button in the members list in the server settings
This commit is contained in:
0% [█ █ █ █ █ █ █ █ █ █] 100% 2026-06-16 10:05:54 -05:00
parent dd2cdd23d7
commit 064a9b4cf4
3 changed files with 42 additions and 20 deletions

View File

@ -1,6 +1,6 @@
{
"name": "peercord",
"version": "1.0.1",
"version": "1.0.2",
"description": "Peercord, A P2P Discord clone powered by Pear Runtime",
"author": "Mastercodeon",
"main": "index.js",

View File

@ -1,2 +1,2 @@
window.APP_VERSION = '1.0.0';
window.APP_VERSION_COLOR = 'hsl(117, 80%, 60%)';
window.APP_VERSION = '1.0.2';
window.APP_VERSION_COLOR = 'hsl(119, 80%, 60%)';

View File

@ -3,6 +3,7 @@ import { network, ADMIN_PUBLIC_KEY } from '../p2p/index.js';
export default function ServerSettingsModal({ onClose, activeServerObj, myKey, onDeleteServer }) {
const [activeTab, setActiveTab] = useState('overview');
const [openRoleMenu, setOpenRoleMenu] = useState(null);
const [serverName, setServerName] = useState(activeServerObj.name || '');
const [serverIcon, setServerIcon] = useState(activeServerObj.icon || null);
@ -180,7 +181,13 @@ export default function ServerSettingsModal({ onClose, activeServerObj, myKey, o
return (
<div className="absolute inset-0 z-50 flex items-center justify-center bg-black/70" onClick={onClose}>
<div className="bg-surface rounded-lg shadow-xl w-full max-w-3xl flex flex-col h-[80vh] border border-panel overflow-hidden" onClick={e => e.stopPropagation()}>
<div
className="bg-surface rounded-lg shadow-xl w-full max-w-3xl flex flex-col h-[80vh] border border-panel overflow-hidden"
onClick={e => {
e.stopPropagation();
setOpenRoleMenu(null);
}}
>
<div className="flex h-full">
{/* Sidebar */}
@ -539,24 +546,39 @@ export default function ServerSettingsModal({ onClose, activeServerObj, myKey, o
})}
{canManageRoles && (
<div className="relative group/addrole">
<button className="flex items-center justify-center w-6 h-6 rounded bg-base border border-surface text-muted hover:text-text hover:border-muted transition-colors">
<div className="relative">
<button
onClick={(e) => {
e.stopPropagation();
setOpenRoleMenu(openRoleMenu === memberKey ? null : memberKey);
}}
className="flex items-center justify-center w-6 h-6 rounded bg-base border border-surface text-muted hover:text-text hover:border-muted transition-colors"
>
+
</button>
<div className="absolute left-0 top-full mt-1 bg-base border border-surface rounded shadow-xl p-1 hidden group-hover/addrole:flex flex-col w-32 z-10">
{roles.map(role => (
<button
key={role.id}
onClick={() => toggleMemberRole(memberKey, role.id)}
className="text-left px-2 py-1.5 text-xs text-text hover:bg-panel rounded flex items-center gap-2"
>
<div className="w-2 h-2 rounded-full" style={{ backgroundColor: role.color }}></div>
{role.name}
{userRoles.includes(role.id) && <span className="ml-auto text-green-500"></span>}
</button>
))}
{roles.length === 0 && <span className="text-xs text-muted p-2">No roles available</span>}
</div>
{openRoleMenu === memberKey && (
<div
className="absolute left-0 top-full mt-1 bg-base border border-surface rounded shadow-xl p-1 flex flex-col w-32 z-10"
onClick={(e) => e.stopPropagation()}
>
{roles.map(role => (
<button
key={role.id}
onClick={(e) => {
e.stopPropagation();
toggleMemberRole(memberKey, role.id);
setOpenRoleMenu(null);
}}
className="text-left px-2 py-1.5 text-xs text-text hover:bg-panel rounded flex items-center gap-2"
>
<div className="w-2 h-2 rounded-full" style={{ backgroundColor: role.color }}></div>
{role.name}
{userRoles.includes(role.id) && <span className="ml-auto text-green-500"></span>}
</button>
))}
{roles.length === 0 && <span className="text-xs text-muted p-2">No roles available</span>}
</div>
)}
</div>
)}