feat: adds field visibility dropdown live component

lib/mv_web/components/core_components.ex

@@ -111,6 +111,126 @@ defmodule MvWeb.CoreComponents do
     end
   end
 
+  @doc """
+  Renders a dropdown menu.
+
+  ## Examples
+
+      <.dropdown_menu items={@items} open={@open} phx-target={@myself} />
+  """
+  attr :id, :string, default: "dropdown-menu"
+  attr :items, :list, required: true, doc: "List of %{label: string, value: any} maps"
+  attr :button_label, :string, default: "Dropdown"
+  attr :icon, :string, default: nil
+  attr :checkboxes, :boolean, default: false
+  attr :selected, :map, default: %{}
+  attr :open, :boolean, default: false, doc: "Whether the dropdown is open"
+  attr :show_select_buttons, :boolean, default: false, doc: "Show select all/none buttons"
+  attr :phx_target, :any, default: nil
+
+  def dropdown_menu(assigns) do
+    unless Map.has_key?(assigns, :phx_target) do
+      raise ArgumentError, ":phx_target is required in dropdown_menu/1"
+    end
+
+    assigns =
+      assign_new(assigns, :items, fn -> [] end)
+      |> assign_new(:button_label, fn -> "Dropdown" end)
+      |> assign_new(:icon, fn -> nil end)
+      |> assign_new(:checkboxes, fn -> false end)
+      |> assign_new(:selected, fn -> %{} end)
+      |> assign_new(:open, fn -> false end)
+      |> assign_new(:show_select_buttons, fn -> false end)
+      |> assign(:phx_target, assigns.phx_target)
+      |> assign_new(:id, fn -> "dropdown-menu" end)
+
+    ~H"""
+    <div class="relative" phx-click-away="close_dropdown" phx-target={@phx_target}>
+      <button
+        type="button"
+        tabindex="0"
+        role="button"
+        aria-haspopup="menu"
+        aria-expanded={@open}
+        aria-controls={@id}
+        class="btn btn-ghost"
+        phx-click="toggle_dropdown"
+        phx-target={@phx_target}
+      >
+        <%= if @icon do %><.icon name={@icon} /><% end %>
+        <span><%= @button_label %></span>
+      </button>
+
+      <ul
+        :if={@open}
+        id={@id}
+        role="menu"
+        class="absolute right-0 mt-2 bg-base-100 z-[100] p-2 shadow-lg rounded-box w-64 max-h-96 overflow-y-auto border border-base-300"
+        tabindex="0"
+        phx-window-keydown="close_dropdown"
+        phx-key="Escape"
+        phx-target={@phx_target}
+      >
+        <li :if={@show_select_buttons} role="none">
+          <div class="flex justify-between items-center mb-2 px-2">
+            <span class="font-semibold">{gettext("Options")}</span>
+            <div class="flex gap-1">
+              <button
+                type="button"
+                role="menuitem"
+                aria-label={gettext("Select all")}
+                phx-click="select_all"
+                phx-target={@phx_target}
+                class="btn btn-xs btn-ghost"
+              >
+                {gettext("All")}
+              </button>
+              <button
+                type="button"
+                role="menuitem"
+                aria-label={gettext("Select none")}
+                phx-click="select_none"
+                phx-target={@phx_target}
+                class="btn btn-xs btn-ghost"
+              >
+                {gettext("None")}
+              </button>
+            </div>
+          </div>
+        </li>
+
+        <li :if={@show_select_buttons} role="separator" class="divider my-1"></li>
+
+        <%= for item <- @items do %>
+          <li role="none">
+            <label
+              role={if @checkboxes, do: "menuitemcheckbox", else: "menuitem"}
+              aria-checked={@checkboxes && Map.get(@selected, item.value, true)}
+              tabindex="0"
+              class="flex items-center gap-2 px-2 py-1 rounded cursor-pointer hover:bg-base-200"
+              phx-click="select_item"
+              phx-value-item={item.value}
+              phx-target={@phx_target}
+            >
+              <%= if @checkboxes do %>
+                <input
+                  type="checkbox"
+                  class="checkbox checkbox-sm"
+                  checked={Map.get(@selected, item.value, true)}
+                  tabindex="-1"
+                  aria-hidden="true"
+                  readonly
+                />
+              <% end %>
+              <span><%= item.label %></span>
+            </label>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+    """
+  end
+
   @doc """
   Renders an input with label and error messages.
 

lib/mv_web/components/field_visibility_dropdown_component.ex

@@ -0,0 +1,172 @@
+defmodule MvWeb.Components.FieldVisibilityDropdownComponent do
+  @moduledoc """
+  LiveComponent for managing field visibility in the member overview.
+
+  Provides an accessible dropdown menu where users can select/deselect
+  which member fields and custom fields are visible in the table.
+
+  ## Props
+    - `:all_fields` - List of all available fields
+    - `:custom_fields` - List of CustomField resources
+    - `:selected_fields` - Map field_name → boolean
+    - `:id` - Component ID
+
+  ## Events sent to parent:
+    - `{:field_toggled, field, value}`
+    - `{:fields_selected, map}`
+  """
+
+  use MvWeb, :live_component
+
+  # ---------------------------------------------------------------------------
+  # UPDATE
+  # ---------------------------------------------------------------------------
+
+  @impl true
+  def update(assigns, socket) do
+    socket =
+      socket
+      |> assign(assigns)
+      |> assign_new(:open, fn -> false end)
+      |> assign_new(:all_fields, fn -> [] end)
+      |> assign_new(:custom_fields, fn -> [] end)
+      |> assign_new(:selected_fields, fn -> %{} end)
+
+    {:ok, socket}
+  end
+
+  # ---------------------------------------------------------------------------
+  # RENDER
+  # ---------------------------------------------------------------------------
+
+  @impl true
+  def render(assigns) do
+    all_fields = assigns.all_fields || []
+    custom_fields = assigns.custom_fields || []
+
+    all_items =
+      Enum.map(member_fields(all_fields), fn field ->
+        %{
+          value: field_to_string(field),
+          label: format_field_label(field)
+        }
+      end) ++
+        Enum.map(custom_fields(all_fields), fn field ->
+          %{
+            value: field,
+            label: format_custom_field_label(field, custom_fields)
+          }
+        end)
+
+    assigns = assign(assigns, :all_items, all_items)
+
+    # LiveComponents require a static HTML element as root, not a function component
+    ~H"""
+    <div>
+      <.dropdown_menu
+        id="field-visibility-menu"
+        icon="hero-adjustments-horizontal"
+        button_label={gettext("Columns")}
+        items={@all_items}
+        checkboxes={true}
+        selected={@selected_fields}
+        open={@open}
+        show_select_buttons={true}
+        phx_target={@myself}
+      />
+    </div>
+    """
+  end
+
+  # ---------------------------------------------------------------------------
+  # EVENTS (matching the Core Component API)
+  # ---------------------------------------------------------------------------
+
+  @impl true
+  def handle_event("toggle_dropdown", _params, socket) do
+    {:noreply, assign(socket, :open, !socket.assigns.open)}
+  end
+
+  def handle_event("close_dropdown", _params, socket) do
+    {:noreply, assign(socket, :open, false)}
+  end
+
+  # toggle single item
+  def handle_event("select_item", %{"item" => item}, socket) do
+    current = Map.get(socket.assigns.selected_fields, item, true)
+    updated = Map.put(socket.assigns.selected_fields, item, !current)
+
+    send(self(), {:field_toggled, item, !current})
+    {:noreply, assign(socket, :selected_fields, updated)}
+  end
+
+  # select all
+  def handle_event("select_all", _params, socket) do
+    all =
+      socket.assigns.all_fields
+      |> Enum.map(&field_to_string/1)
+      |> Enum.map(&{&1, true})
+      |> Enum.into(%{})
+
+    send(self(), {:fields_selected, all})
+    {:noreply, assign(socket, :selected_fields, all)}
+  end
+
+  # select none
+  def handle_event("select_none", _params, socket) do
+    none =
+      socket.assigns.all_fields
+      |> Enum.map(&field_to_string/1)
+      |> Enum.map(&{&1, false})
+      |> Enum.into(%{})
+
+    send(self(), {:fields_selected, none})
+    {:noreply, assign(socket, :selected_fields, none)}
+  end
+
+  # ---------------------------------------------------------------------------
+  # HELPERS (with defensive nil guards)
+  # ---------------------------------------------------------------------------
+
+  defp member_fields(nil), do: []
+
+  defp member_fields(fields) do
+    Enum.filter(fields, fn field ->
+      is_atom(field) ||
+        (is_binary(field) && not String.starts_with?(field, "custom_field_"))
+    end)
+  end
+
+  defp custom_fields(nil), do: []
+
+  defp custom_fields(fields) do
+    Enum.filter(fields, fn field ->
+      is_binary(field) && String.starts_with?(field, "custom_field_")
+    end)
+  end
+
+  defp field_to_string(field) when is_atom(field), do: Atom.to_string(field)
+  defp field_to_string(field) when is_binary(field), do: field
+
+  defp format_field_label(field) do
+    field
+    |> field_to_string()
+    |> String.replace("_", " ")
+    |> String.split()
+    |> Enum.map(&String.capitalize/1)
+    |> Enum.join(" ")
+  end
+
+  defp format_custom_field_label(field_string, custom_fields) do
+    case String.trim_leading(field_string, "custom_field_") do
+      "" ->
+        field_string
+
+      id ->
+        case Enum.find(custom_fields, fn cf -> to_string(cf.id) == id end) do
+          nil -> gettext("Custom Field %{id}", id: id)
+          custom_field -> custom_field.name
+        end
+    end
+  end
+end