Rename panel to menu

Author: ukutaht

lib/plausible_web/components/generic.ex

@@ -227,25 +227,25 @@ defmodule PlausibleWeb.Components.Generic do
     attr(:class, :string)
   end
 
-  slot :panel, required: true do
+  slot :menu, required: true do
     attr(:class, :string)
   end
 
   def dropdown(assigns) do
-    assigns = assign(assigns, :panel_class, assigns.panel |> List.first() |> Map.get(:class, ""))
+    assigns = assign(assigns, :menu_class, assigns.menu |> List.first() |> Map.get(:class, ""))
 
     ~H"""
     <div
       x-data="dropdown"
       x-on:keydown.escape.prevent.stop="close($refs.button)"
-      x-on:focusin.window="!$refs.panel.contains($event.target) && close()"
+      x-on:focusin.window="!$refs.menu.contains($event.target) && close()"
       class="relative inline-block text-left"
     >
       <button x-ref="button" x-on:click="toggle()" type="button" class={List.first(@button).class}>
         <%= render_slot(List.first(@button)) %>
       </button>
       <div
-        x-ref="panel"
+        x-ref="menu"
         x-show="open"
         x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="opacity-0 scale-95"
@@ -257,10 +257,10 @@ defmodule PlausibleWeb.Components.Generic do
         style="display: none;"
         class={[
           "origin-top-right absolute z-50 right-0 mt-2 p-1 w-max rounded-md shadow-lg overflow-hidden bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none",
-          @panel_class
+          @menu_class
         ]}
       >
-        <%= render_slot(List.first(@panel)) %>
+        <%= render_slot(List.first(@menu)) %>
       </div>
     </div>
     """

lib/plausible_web/live/sites.ex

@@ -233,7 +233,7 @@ defmodule PlausibleWeb.Live.Sites do
       <:button class="size-10 rounded-md hover:cursor-pointer text-gray-400 dark:text-gray-600 hover:text-black dark:hover:text-indigo-400">
         <Heroicons.ellipsis_vertical class="absolute top-3 right-3 size-4" />
       </:button>
-      <:panel class="!mt-0 mr-4 min-w-40">
+      <:menu class="!mt-0 mr-4 min-w-40">
         <!-- adjust position because click area is much bigger than icon. Default positioning from click area looks weird -->
         <.dropdown_item
           :if={List.first(@site.memberships).role != :viewer}
@@ -267,7 +267,7 @@ defmodule PlausibleWeb.Live.Sites do
           <.icon_pin :if={!@site.pinned_at} class="size-4" />
           <span :if={!@site.pinned_at}>Pin Site</span>
         </.dropdown_item>
-      </:panel>
+      </:menu>
     </.dropdown>
     """
   end

lib/plausible_web/templates/layout/_header.html.heex

@@ -65,7 +65,7 @@
                       class="w-7 rounded-full"
                     />
                   </:button>
-                  <:panel>
+                  <:menu>
                     <.dropdown_item>
                       <div class="text-xs text-gray-500 dark:text-gray-400">Signed in as</div>
                       <p class="truncate font-medium text-gray-900 dark:text-gray-100" role="none">
@@ -90,7 +90,7 @@
                     </.dropdown_item>
                     <.dropdown_divider />
                     <.dropdown_item href="/logout">Log Out</.dropdown_item>
-                  </:panel>
+                  </:menu>
                 </.dropdown>
               </li>
               <%= if @conn.assigns[:current_user] && ee?() do %>

lib/plausible_web/templates/site/settings_people.html.heex

@@ -47,7 +47,7 @@
                   <%= membership.role |> to_string() |> String.capitalize() %>
                   <Heroicons.chevron_down mini class="size-4 mt-0.5" />
                 </:button>
-                <:panel class="max-w-60">
+                <:menu class="max-w-60">
                   <%= if membership.role == :owner do %>
                     <.dropdown_item disabled={true}>
                       <div>Owner</div>
@@ -118,7 +118,7 @@
                       Remove member
                     </.dropdown_item>
                   <% end %>
-                </:panel>
+                </:menu>
               </.dropdown>
             </div>
           </li>