Added profil popup - WIP page opens on double click of the name of buddy

frontend/src/chat/chat.css

@@ -4,6 +4,8 @@
   src: url("/fonts/NimbusMonoL.woff2") format("woff2");
 }
 
+@tailwind utilities;
+
 .btn-style {
   @apply
   w-[100px]
@@ -189,4 +191,31 @@ div-private {
   @apply
   text-blue-800;
 
+}
+
+.popUpBox {
+  @apply
+  bg-white 
+  p-6 rounded-xl 
+  shadow-xl 
+  w-[800px]
+  h-[350px]
+  p-[10px]
+  border-1 
+  border-black
+
+}
+
+.profilPopup {
+  @apply 
+  fixed 
+  inset-0 
+  bg-black/50 
+  flex
+  justify-center 
+  items-center;
+}
+
+.hidden{
+    display: none;
 }

frontend/src/pages/chat/chat.html

@@ -31,6 +31,12 @@
               <p>Charlie</p> -->
             </div>
           </div>
+          <div id="profile-modal" class="profilPopup hidden">
+            <div class="popUpBox">
+              <p class="text-xl font-bold" id="modal-name"></p>
+              <button id="close-modal" class="btn-style absolute bottom-32 right-12">Close</button>
+            </div>
+          </div>
         </div>
       </div>
     </div>

frontend/src/pages/chat/chat.ts

@@ -110,13 +110,23 @@ function parseCmdMsg(msgText: string): string[] | undefined {
         command[1] = msgText;
         return command;
     }
-    const noArgCommands = ['@quit', '@cls', '@profile'];
+    const noArgCommands = ['@quit', '@who', '@cls'];
     if (noArgCommands.includes(msgText)) {
         command[0] = msgText;
         command[1] = '';
         return command;
     }
-    const colonIndex = msgText.indexOf(":");
+
+	const ArgCommands = ['@profil', '@block'];
+	const userName = msgText.indexOf(" ");
+	const cmd2 = msgText.slice(0, userName).trim() ?? "";        
+	const user = msgText.slice(userName + 1).trim();
+	if (ArgCommands.includes(cmd2)) {
+    	    command[0] = cmd2;
+    	    command[1] = user;
+    	    return command;
+	}
+	const colonIndex = msgText.indexOf(":");
     if (colonIndex === -1) {
         command[0] = msgText;
         command[1] = '';
@@ -147,6 +157,12 @@ async function listBuddies(buddies: HTMLDivElement, listBuddies: string) {
 		} 
 	});
 
+	buddiesElement.addEventListener("dblclick", () => {
+        console.log("Open profile:", listBuddies);
+    	openProfilePopup(`Profil: ${listBuddies}`);
+
+    });
+
 	buddies.appendChild(buddiesElement);
 	buddies.scrollTop = buddies.scrollHeight;
 	console.log(`Added buddies: ${listBuddies}`);
@@ -244,7 +260,7 @@ async function connected(socket: Socket): Promise<void> {
 async function whoami(socket: Socket) {
 	try {
 		const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
-		const loggedIn = await isLoggedIn();
+		const loggedIn = isLoggedIn();
 
 		const res = await client.guestLogin();
 		switch (res.kind) {
@@ -271,6 +287,15 @@ async function whoami(socket: Socket) {
 	}
 };
 
+async function openProfilePopup(profil: string) {
+
+	const modalname = document.getElementById("modal-name") ?? null;
+	if (modalname)
+		modalname.innerHTML = profil;
+			const profilList = document.getElementById("profile-modal") ?? null;
+	if (profilList)
+		profilList.classList.remove("hidden");
+}
 
 
 function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn {
@@ -438,6 +463,16 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
                 console.log('unknown response: ', value);
             }
 
+
+
+			const buttonPro = document.getElementById("close-modal") ?? null;
+
+			if (buttonPro)
+				buttonPro.addEventListener("click", () => {
+  				const profilList = document.getElementById("profile-modal") ?? null;
+				if (profilList) profilList.classList.add("hidden");
+			});
+
 			// Send button
 			sendButton?.addEventListener("click", () => {
 				if (sendtextbox && sendtextbox.value.trim()) {
@@ -452,6 +487,10 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
     						case '@who':
 								whoami(socket);
 								break;
+							case '@profil':
+								if (`${msgCommand[1]}`)
+									openProfilePopup(`Profil: ${msgCommand[1]}`);
+								break;
     						case '@cls':
     						    chatWindow.innerHTML = '';
     						    break;
@@ -501,7 +540,8 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn
 				}
 			});
 
-			// Whoami button to display user name
+			// Whoami button to display user name					addMessage(msgCommand[0]);
+
 			bwhoami?.addEventListener('click', async () => {
 				whoami(socket);
 			});