From 064a9b4cf43336e7bbca19326a62fea7348aaf11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?0=25=20=5B=E2=96=88=20=E2=96=88=20=E2=96=88=20=E2=96=88=20?=
 =?UTF-8?q?=E2=96=88=20=E2=96=88=20=E2=96=88=20=E2=96=88=20=E2=96=88=20?=
 =?UTF-8?q?=E2=96=88=5D=20100=25?= <lild31415@gmail.com>
Date: Tue, 16 Jun 2026 10:05:54 -0500
Subject: [PATCH] v1.0.2

Fixed the roles add button in the members list in the server settings
---
 Peercord Source/package.json                  |  2 +-
 Peercord Source/public/version.js             |  4 +-
 .../src/components/ServerSettingsModal.jsx    | 56 +++++++++++++------
 3 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/Peercord Source/package.json b/Peercord Source/package.json
index ec52f9c..2a0fb39 100644
--- a/Peercord Source/package.json	
+++ b/Peercord Source/package.json	
@@ -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",
diff --git a/Peercord Source/public/version.js b/Peercord Source/public/version.js
index fc1f334..52ec0c0 100644
--- a/Peercord Source/public/version.js	
+++ b/Peercord Source/public/version.js	
@@ -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%)';
diff --git a/Peercord Source/src/components/ServerSettingsModal.jsx b/Peercord Source/src/components/ServerSettingsModal.jsx
index 283ce1b..c679580 100644
--- a/Peercord Source/src/components/ServerSettingsModal.jsx	
+++ b/Peercord Source/src/components/ServerSettingsModal.jsx	
@@ -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>
                             )}