From ba6373319e0b3dd9fb71e251a673ca69ad59319d Mon Sep 17 00:00:00 2001
From: Alex Lion <dev@alexandrelion.com>
Date: Wed, 15 Jul 2026 17:46:22 +0200
Subject: [PATCH] Delegate nickname popup closing and fix z-index

---
 assets/js/app.js                              |  3 +-
 lib/claper_web/live/event_live/show.html.heex |  6 ++--
 test/claper_web/live/event_live/show_test.exs | 36 +++++++++++++++++++
 3 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 test/claper_web/live/event_live/show_test.exs

diff --git a/assets/js/app.js b/assets/js/app.js
index 1603f94..9a7c251 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -247,9 +247,10 @@ Hooks.NicknamePicker = {
       localStorage.getItem("nickname") || "",
     );
 
-    if (nickname) {
+    if (nickname && nickname.trim().length > 0) {
       localStorage.setItem("nickname", nickname);
       this.pushEvent("set-nickname", { nickname: nickname });
+      this.js().exec(this.el.dataset.close);
     }
   },
 };
diff --git a/lib/claper_web/live/event_live/show.html.heex b/lib/claper_web/live/event_live/show.html.heex
index b2bb9ae..775ae81 100644
--- a/lib/claper_web/live/event_live/show.html.heex
+++ b/lib/claper_web/live/event_live/show.html.heex
@@ -4,13 +4,13 @@
       <div
         id="side-menu-shadow"
         phx-click={toggle_side_menu()}
-        class="hidden fixed z-20 h-screen bg-black/70 w-full"
+        class="hidden fixed z-50 h-screen bg-black/70 w-full"
       >
       </div>
 
       <div
         id="side-menu"
-        class="hidden fixed h-screen w-64 bg-white rounded-r-lg flex z-30 px-4 flex-col justify-start lg:left-0 animate__faster"
+        class="hidden fixed h-screen w-64 bg-white rounded-r-lg flex z-[60] px-4 flex-col justify-start lg:left-0 animate__faster"
       >
         <div>
           <img src="/images/logo-large-black.svg" class="h-16 my-3" />
@@ -232,8 +232,8 @@
 
       <button
         id="nicknamepicker"
-        phx-click={toggle_nickname_popup()}
         data-prompt={gettext("Enter your name")}
+        data-close={toggle_nickname_popup()}
         phx-hook="NicknamePicker"
         class="w-full bg-gray-900 text-left text-white px-3 py-2 rounded-md flex space-x-2 items-center"
       >
diff --git a/test/claper_web/live/event_live/show_test.exs b/test/claper_web/live/event_live/show_test.exs
new file mode 100644
index 0000000..c124044
--- /dev/null
+++ b/test/claper_web/live/event_live/show_test.exs
@@ -0,0 +1,36 @@
+defmodule ClaperWeb.EventLive.ShowTest do
+  use ClaperWeb.ConnCase
+
+  import Phoenix.LiveViewTest
+  import Claper.PresentationsFixtures
+
+  setup [:register_and_log_in_user]
+
+  test "renders attendee menus above inputs and delegates nickname closing to the hook", %{
+    conn: conn,
+    user: user
+  } do
+    presentation_file = presentation_file_fixture(%{user: user}, [:event])
+    presentation_state_fixture(%{presentation_file: presentation_file})
+
+    {:ok, _view, html} = live(conn, ~p"/e/#{presentation_file.event.code}")
+
+    document = Floki.parse_document!(html)
+
+    assert "z-50" in classes(document, "#side-menu-shadow")
+    assert "z-[60]" in classes(document, "#side-menu")
+
+    [close_command] = Floki.attribute(document, "#nicknamepicker", "data-close")
+
+    assert [["toggle", %{"to" => "#nickname-popup"} = options]] = Jason.decode!(close_command)
+    assert options["display"] == "flex"
+    assert Floki.attribute(document, "#nicknamepicker", "phx-click") == []
+  end
+
+  defp classes(document, selector) do
+    document
+    |> Floki.attribute(selector, "class")
+    |> List.first()
+    |> String.split()
+  end
+end