cleaning up actions UI in player list

public/js/app.js

@@ -978,8 +978,49 @@ document.addEventListener('DOMContentLoaded', () => {
             const player = button.getAttribute('data-player').trim();
             const actionDiv = document.querySelector(`.action-buttons[data-player="${player}"]`);
             if (actionDiv) {
-              actionDiv.classList.toggle('hidden');
+              actionDiv.classList.remove('hidden');
-              button.textContent = actionDiv.classList.contains('hidden') ? 'Actions' : 'Hide';
+              button.classList.add('hidden');
+            }
+          });
+        });
+    
+        if (message.type === 'list-players' && message.data?.players) {
+          const players = message.data.players || [];
+          state.currentPlayers = players;
+          const isSinglePlayer = players.length <= 1;
+          const playerListHtml = players.length > 0
+            ? players.map(player => `
+        <div class="flex items-center space-x-4 mb-2">
+          <span class="w-32">${player}</span>
+          <div class="flex flex-col gap-2">
+            <button class="toggle-actions bg-gray-600 hover:bg-gray-700 px-2 py-1 rounded text-sm" data-player="${player}">Actions</button>
+            <div class="action-buttons hidden flex-wrap gap-2" data-player="${player}">
+              <button class="tell-player bg-blue-600 hover:bg-blue-700 px-2 py-1 rounded text-sm" data-player="${player}">Tell</button>
+              <button class="give-player bg-green-600 hover:bg-green-700 px-2 py-1 rounded text-sm" data-player="${player}">Give</button>
+              <button class="teleport-player bg-cyan-600 hover:bg-cyan-700 px-2 py-1 rounded text-sm ${isSinglePlayer ? 'opacity-50 cursor-not-allowed' : ''}" data-player="${player}" ${isSinglePlayer ? 'disabled' : ''}>Teleport</button>
+              <button class="effect-player bg-teal-600 hover:bg-teal-700 px-2 py-1 rounded text-sm" data-player="${player}">Effect</button>
+              <button class="op-player bg-purple-600 hover:bg-purple-700 px-2 py-1 rounded text-sm" data-player="${player}">Op</button>
+              <button class="deop-player bg-purple-600 hover:bg-purple-700 px-2 py-1 rounded text-sm" data-player="${player}">Deop</button>
+              <button class="kick-player bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm" data-player="${player}">Kick</button>
+              <button class="ban-player bg-red-600 hover:bg-red-700 px-2 py-1 rounded text-sm" data-player="${player}">Ban</button>
+              <button class="close-actions bg-gray-600 hover:bg-gray-700 px-2 py-1 rounded text-sm" data-player="${player}">Close</button>
+            </div>
+          </div>
+        </div>
+        `).join('')
+            : 'None';
+          if (state.playerList !== playerListHtml && elements.playerList) {
+            elements.playerList.innerHTML = playerListHtml;
+            state.playerList = playerListHtml;
+        
+            // Toggle action buttons
+            document.querySelectorAll('.toggle-actions').forEach(button => {
+              button.addEventListener('click', () => {
+                const player = button.getAttribute('data-player').trim();
+                const actionDiv = document.querySelector(`.action-buttons[data-player="${player}"]`);
+                if (actionDiv) {
+                  actionDiv.classList.remove('hidden');
+                  button.classList.add('hidden');
                 }
               });
             });
@@ -992,10 +1033,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 const toggleButton = document.querySelector(`.toggle-actions[data-player="${player}"]`);
                 if (actionDiv && toggleButton) {
                   actionDiv.classList.add('hidden');
-              toggleButton.textContent = 'Actions';
+                  toggleButton.classList.remove('hidden');
                 }
               });
             });
+        }
+        }
 
         document.querySelectorAll('.tell-player').forEach(button => {
           button.addEventListener('click', () => {