Update goal settings design

- Replace the `Add goal` button in goal settings with a dropdown button to directly select the goal type. This way, a modal opens with the correct form for the selected goal type. The tabs in the modal have been removed.
- Add a new `pill` component to show the goal type in the table in a more distinct way. The `settings_badge` component is replaced with the `pill` component. The `pill` component that was used in `plan_box.ex` is renamed to `highlight_pill`.
- Replaced `Belongs to funnel` text with a funnel icon in the goal settings list.
- Some small tweaks like increasing the search bar width, the padding of the table cells, and adding a header to the goal settings list.

Author: sanne-san

lib/plausible_web/components/billing/plan_box.ex

@@ -39,7 +39,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
         ]}>
           {String.capitalize(to_string(@kind))}
         </h3>
-        <.pill :if={@highlight} text={@highlight} />
+        <.highlight_pill :if={@highlight} text={@highlight} />
       </div>
       <div>
         <div class={@price_container_class}>
@@ -95,7 +95,7 @@ defmodule PlausibleWeb.Components.Billing.PlanBox do
     """
   end
 
-  defp pill(assigns) do
+  defp highlight_pill(assigns) do
     ~H"""
     <div class="flex items-center justify-between gap-x-4">
       <p

lib/plausible_web/components/generic.ex

@@ -786,7 +786,7 @@ defmodule PlausibleWeb.Components.Generic do
     <td
       class={[
         @height,
-        "text-sm px-6 py-3 first:pl-0 last:pr-0 whitespace-nowrap",
+        "text-sm px-6 py-4 first:pl-0 last:pr-0 whitespace-nowrap",
         @truncate && "truncate",
         @max_width,
         @actions && "flex text-right justify-end",
@@ -1020,18 +1020,23 @@ defmodule PlausibleWeb.Components.Generic do
 
   def filter_bar(assigns) do
     ~H"""
-    <div class="flex items-center justify-between" x-data>
-      <div :if={@filtering_enabled?} class="relative rounded-md flex">
-        <form id="filter-form" phx-change="filter" phx-submit="filter" class="flex items-center">
-          <div class="text-gray-800 inline-flex items-center">
+    <div class="flex items-center justify-between gap-2" x-data>
+      <div :if={@filtering_enabled?} class="relative rounded-md flex flex-grow-1 w-full">
+        <form
+          id="filter-form"
+          phx-change="filter"
+          phx-submit="filter"
+          class="flex items-center w-full"
+        >
+          <div class="text-gray-800 inline-flex items-center w-full">
             <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
               <Heroicons.magnifying_glass class="feather mr-1 dark:text-gray-300" />
             </div>
             <input
               type="text"
               name="filter-text"
               id="filter-text"
-              class="w-full max-w-64 pl-8 text-sm dark:bg-gray-750 dark:text-gray-300 focus:ring-indigo-500 focus:border-indigo-500 block border-gray-300 dark:border-gray-750 rounded-md dark:placeholder:text-gray-400 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500"
+              class="w-full max-w-80 pl-8 text-sm dark:bg-gray-750 dark:text-gray-300 focus:ring-indigo-500 focus:border-indigo-500 block border-gray-300 dark:border-gray-750 rounded-md dark:placeholder:text-gray-400 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500"
               placeholder="Press / to search"
               x-ref="filter_text"
               phx-debounce={200}
@@ -1123,13 +1128,41 @@ defmodule PlausibleWeb.Components.Generic do
     """
   end
 
-  def settings_badge(%{type: :new} = assigns) do
+  attr(:class, :string, default: "")
+  attr(:color, :atom, default: :gray, values: [:gray, :indigo, :yellow, :green])
+  attr(:rest, :global)
+  slot(:inner_block, required: true)
+
+  def pill(assigns) do
+    color_classes = get_pill_color_classes(assigns.color)
+
     ~H"""
-    <span class="inline-block ml-2 bg-indigo-100 text-indigo-600 text-xs font-semibold py-1 px-2 rounded-md">
-      NEW 🔥
+    <span
+      class={[
+        "inline-flex items-center text-xs font-medium py-1 px-2 rounded-md",
+        color_classes,
+        @class
+      ]}
+      {@rest}
+    >
+      {render_slot(@inner_block)}
     </span>
     """
   end
 
-  def settings_badge(assigns), do: ~H""
+  defp get_pill_color_classes(:gray) do
+    "bg-gray-100 text-gray-800 dark:bg-gray-750 dark:text-gray-200"
+  end
+
+  defp get_pill_color_classes(:indigo) do
+    "bg-indigo-100/60 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-300"
+  end
+
+  defp get_pill_color_classes(:yellow) do
+    "bg-yellow-100/80 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300"
+  end
+
+  defp get_pill_color_classes(:green) do
+    "bg-green-100/70 text-green-800 dark:bg-green-900/40 dark:text-green-300"
+  end
 end

lib/plausible_web/components/layout.ex

@@ -140,7 +140,9 @@ defmodule PlausibleWeb.Components.Layout do
         class="size-5 mr-2"
       />
       {@text}
-      <PlausibleWeb.Components.Generic.settings_badge type={@badge} />
+      <PlausibleWeb.Components.Generic.pill :if={@badge == :new} color={:indigo} class="ml-2">
+        NEW 🔥
+      </PlausibleWeb.Components.Generic.pill>
       <Heroicons.chevron_down
         :if={is_nil(@value)}
         class="h-3 w-3 ml-2 text-gray-400 dark:text-gray-500"

lib/plausible_web/components/prima_dropdown.ex

@@ -33,7 +33,7 @@ defmodule PlausibleWeb.Components.PrimaDropdown do
     <Dropdown.dropdown_item
       as={@as}
       disabled={@disabled}
-      class="group/item z-50 flex items-center gap-x-2 min-w-max rounded-md px-4 py-2 text-gray-700 text-sm dark:text-gray-300 data-focus:bg-gray-100 dark:data-focus:bg-gray-700 data-focus:text-gray-900 dark:data-focus:text-gray-100"
+      class="group/item z-50 flex items-center gap-x-2 min-w-max w-full rounded-md pl-3 pr-5 py-2 text-gray-700 text-sm dark:text-gray-300 data-focus:bg-gray-100 dark:data-focus:bg-gray-700 data-focus:text-gray-900 dark:data-focus:text-gray-100"
       {@rest}
     >
       {render_slot(@inner_block)}

lib/plausible_web/live/goal_settings.ex

@@ -51,7 +51,8 @@ defmodule PlausibleWeb.Live.GoalSettings do
        domain: domain,
        displayed_goals: socket.assigns.all_goals,
        filter_text: "",
-       form_goal: nil
+       form_goal: nil,
+       goal_type: nil
      )}
   end
 
@@ -75,6 +76,7 @@ defmodule PlausibleWeb.Live.GoalSettings do
           site_team={@site_team}
           existing_goals={@all_goals}
           goal={@form_goal}
+          goal_type={@goal_type}
           on_save_goal={
             fn goal, socket ->
               send(self(), {:goal_added, goal})
@@ -123,8 +125,12 @@ defmodule PlausibleWeb.Live.GoalSettings do
     {:noreply, socket}
   end
 
-  def handle_event("add-goal", _, socket) do
-    socket = socket |> assign(form_goal: nil) |> Modal.open("goals-form-modal")
+  def handle_event("add-goal", %{"goal-type" => goal_type}, socket) do
+    socket =
+      socket
+      |> assign(form_goal: nil, goal_type: goal_type)
+      |> Modal.open("goals-form-modal")
+
     {:noreply, socket}
   end
 
@@ -167,7 +173,8 @@ defmodule PlausibleWeb.Live.GoalSettings do
         event_name_options:
           Enum.reject(socket.assigns.event_name_options, &(&1 == goal.event_name)),
         displayed_goals: all_goals,
-        form_goal: nil
+        form_goal: nil,
+        goal_type: nil
       )
       |> put_live_flash(:success, "Goal saved successfully")
 

lib/plausible_web/live/goal_settings/form.ex

@@ -19,11 +19,15 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
       |> Plausible.Goal.changeset()
       |> to_form()
 
-    selected_tab =
-      case assigns.goal do
-        %{page_path: p, scroll_threshold: s} when not is_nil(p) and s > -1 -> "scroll"
-        %{page_path: p} when not is_nil(p) -> "pageviews"
-        _goal_or_nil -> "custom_events"
+    form_type =
+      if assigns.goal do
+        case assigns.goal do
+          %{page_path: p, scroll_threshold: s} when not is_nil(p) and s > -1 -> "scroll"
+          %{page_path: p} when not is_nil(p) -> "pageviews"
+          _ -> "custom_events"
+        end
+      else
+        assigns[:goal_type] || "custom_events"
       end
 
     socket =
@@ -38,14 +42,14 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
         site_role: assigns.site_role,
         site_team: assigns.site_team,
         domain: assigns.domain,
-        selected_tab: selected_tab,
-        tab_sequence_id: 0,
+        form_type: form_type,
         site: site,
         has_access_to_revenue_goals?: has_access_to_revenue_goals?,
         existing_goals: assigns.existing_goals,
         on_save_goal: assigns.on_save_goal,
         on_autoconfigure: assigns.on_autoconfigure,
-        goal: assigns.goal
+        goal: assigns.goal,
+        goal_type: assigns[:goal_type]
       )
 
     {:ok, socket}
@@ -69,7 +73,7 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
       <.title>Edit goal for {@domain}</.title>
 
       <.custom_event_fields
-        :if={@selected_tab == "custom_events"}
+        :if={@form_type == "custom_events"}
         f={f}
         suffix={@context_unique_id}
         site_role={@site_role}
@@ -81,14 +85,14 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
         has_access_to_revenue_goals?={@has_access_to_revenue_goals?}
       />
       <.pageview_fields
-        :if={@selected_tab == "pageviews"}
+        :if={@form_type == "pageviews"}
         f={f}
         goal={@goal}
         suffix={@context_unique_id}
         site={@site}
       />
       <.scroll_fields
-        :if={@selected_tab == "scroll"}
+        :if={@form_type == "scroll"}
         f={f}
         goal={@goal}
         suffix={@context_unique_id}
@@ -104,58 +108,41 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
 
   def create_form(assigns) do
     ~H"""
-    <.form
-      :let={f}
-      x-data="{ tabSelectionInProgress: false }"
-      for={@form}
-      phx-submit="save-goal"
-      phx-target={@myself}
-    >
+    <.form :let={f} for={@form} phx-submit="save-goal" phx-target={@myself}>
       <.title>
         Add goal for {Plausible.Sites.display_name(@site)}
       </.title>
 
-      <.tabs current_user={@current_user} site={@site} selected_tab={@selected_tab} myself={@myself} />
-
       <.custom_event_fields
-        :if={@selected_tab == "custom_events"}
-        x-show="!tabSelectionInProgress"
+        :if={@form_type == "custom_events"}
         f={f}
-        suffix={suffix(@context_unique_id, @tab_sequence_id)}
+        suffix={@context_unique_id}
         site_role={@site_role}
         site_team={@site_team}
         site={@site}
         existing_goals={@existing_goals}
         goal_options={@event_name_options}
         has_access_to_revenue_goals?={@has_access_to_revenue_goals?}
-        x-init="tabSelectionInProgress = false"
       />
       <.pageview_fields
-        :if={@selected_tab == "pageviews"}
-        x-show="!tabSelectionInProgress"
+        :if={@form_type == "pageviews"}
         f={f}
-        suffix={suffix(@context_unique_id, @tab_sequence_id)}
+        suffix={@context_unique_id}
         site={@site}
-        x-init="tabSelectionInProgress = false"
       />
       <.scroll_fields
-        :if={@selected_tab == "scroll"}
-        x-show="!tabSelectionInProgress"
+        :if={@form_type == "scroll"}
         f={f}
-        suffix={suffix(@context_unique_id, @tab_sequence_id)}
+        suffix={@context_unique_id}
         site={@site}
-        x-init="tabSelectionInProgress = false"
       />
 
-      <div x-show="!tabSelectionInProgress">
-        <.button type="submit" class="w-full">
-          Add goal
-        </.button>
-      </div>
+      <.button type="submit" class="w-full">
+        Add goal
+      </.button>
 
       <button
-        :if={@selected_tab == "custom_events" && @event_name_options_count > 0}
-        x-show="!tabSelectionInProgress"
+        :if={@form_type == "custom_events" && @event_name_options_count > 0}
         class="mt-4 text-sm hover:underline text-indigo-600 dark:text-indigo-400 text-left"
         phx-click="autoconfigure"
         phx-target={@myself}
@@ -442,73 +429,6 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
     """
   end
 
-  def tabs(assigns) do
-    ~H"""
-    <div class="text-sm mt-6 font-medium dark:text-gray-100">Goal trigger</div>
-    <div class="my-2 p-1 text-sm w-full flex gap-1 overflow-hidden rounded-lg border border-gray-300 dark:border-gray-700">
-      <.tab
-        id="event-tab"
-        tab_value="custom_events"
-        selected?={@selected_tab == "custom_events"}
-        myself={@myself}
-      >
-        Custom event
-      </.tab>
-      <.tab
-        id="pageview-tab"
-        tab_value="pageviews"
-        selected?={@selected_tab == "pageviews"}
-        myself={@myself}
-      >
-        Pageview
-      </.tab>
-      <.tab
-        id="scroll-tab"
-        tab_value="scroll"
-        selected?={@selected_tab == "scroll"}
-        myself={@myself}
-      >
-        Scroll depth
-      </.tab>
-    </div>
-    """
-  end
-
-  attr(:id, :string, required: true)
-  attr(:tab_value, :string, required: true)
-  attr(:selected?, :boolean, required: true)
-  attr(:myself, :any, required: true)
-  slot(:inner_block, required: true)
-
-  defp tab(assigns) do
-    ~H"""
-    <a
-      class={[
-        "flex-1 text-center py-2 px-3 rounded-md font-medium hover:bg-gray-100 dark:hover:bg-gray-750 transition-colors duration-150",
-        "cursor-pointer",
-        @selected? && "bg-gray-150 dark:bg-gray-700 text-gray-800 dark:text-white",
-        !@selected? && "dark:text-gray-200 text-gray-600 hover:text-gray-800 dark:hover:text-white"
-      ]}
-      id={@id}
-      x-on:click={!@selected? && "tabSelectionInProgress = true"}
-      phx-click="switch-tab"
-      phx-value-tab={@tab_value}
-      phx-target={@myself}
-    >
-      {render_slot(@inner_block)}
-    </a>
-    """
-  end
-
-  def handle_event("switch-tab", %{"tab" => tab}, socket) do
-    socket =
-      socket
-      |> assign(:selected_tab, tab)
-      |> update(:tab_sequence_id, &(&1 + 1))
-
-    {:noreply, socket}
-  end
-
   def handle_event("save-goal", %{"goal" => goal_params}, %{assigns: %{goal: nil}} = socket) do
     case Plausible.Goals.create(socket.assigns.site, goal_params) do
       {:ok, goal} ->
@@ -573,10 +493,6 @@ defmodule PlausibleWeb.Live.GoalSettings.Form do
     |> Enum.map(fn name -> {name, name} end)
   end
 
-  defp suffix(context_unique_id, tab_sequence_id) do
-    "#{context_unique_id}-tabseq#{tab_sequence_id}"
-  end
-
   on_ee do
     defp currency_option(nil), do: nil