feat: add approval ui for join requests

lib/mv_web/components/layouts/sidebar.ex

@@ -8,6 +8,15 @@ defmodule MvWeb.Layouts.Sidebar do
 
   attr :current_user, :map, default: nil, doc: "The current user"
   attr :club_name, :string, required: true, doc: "The name of the club"
+
+  attr :join_form_enabled, :boolean,
+    default: false,
+    doc: "Whether the public join form is enabled in settings"
+
+  attr :unprocessed_join_requests_count, :integer,
+    default: 0,
+    doc: "Count of submitted (unprocessed) join requests for sidebar indicator"
+
   attr :mobile, :boolean, default: false, doc: "Whether this is mobile view"
 
   def sidebar(assigns) do
@@ -96,6 +105,15 @@ defmodule MvWeb.Layouts.Sidebar do
         />
       <% end %>
 
+      <%= if @join_form_enabled and can_access_page?(@current_user, PagePaths.join_requests()) do %>
+        <.menu_item
+          href={~p"/join_requests"}
+          icon="hero-inbox-arrow-down"
+          label={gettext("Join requests")}
+          indicator_dot={@unprocessed_join_requests_count > 0}
+        />
+      <% end %>
+
       <%= if admin_menu_visible?(@current_user) do %>
         <.menu_group
           icon="hero-cog-6-tooth"
@@ -137,6 +155,10 @@ defmodule MvWeb.Layouts.Sidebar do
   attr :icon, :string, required: true, doc: "Heroicon name"
   attr :label, :string, required: true, doc: "Menu item label"
 
+  attr :indicator_dot, :boolean,
+    default: false,
+    doc: "Show a small dot on the icon (e.g. for unprocessed items)"
+
   defp menu_item(assigns) do
     ~H"""
     <li role="none">
@@ -146,7 +168,16 @@ defmodule MvWeb.Layouts.Sidebar do
         data-tip={@label}
         role="menuitem"
       >
-        <.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
+        <span class="relative shrink-0">
+          <.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
+          <%= if @indicator_dot do %>
+            <span
+              class="absolute -top-0.5 -right-0.5 size-2 rounded-full bg-primary"
+              aria-hidden="true"
+            >
+            </span>
+          <% end %>
+        </span>
         <span class="menu-label">{@label}</span>
       </.link>
     </li>