wip

plausible · Jan 6, 2025 · a771492 · a771492
1 parent 161f5d7
commit a771492
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 43 deletions.
diff --git a/lib/plausible_web/live/components/form.ex b/lib/plausible_web/live/components/form.ex
@@ -361,21 +361,31 @@ defmodule PlausibleWeb.Live.Components.Form do
   attr :href_base, :string, default: "/"
   attr :prompt, :string, default: nil
   attr :action, :string, default: nil
+  attr :selected_fn, :any, required: true
 
   def mobile_burger(assigns) do
+    options = assigns[:options]
+
     options =
-      if prompt = assigns[:prompt] do
-        [{prompt, ""} | assigns[:options]]
-      else
-        assigns[:options]
-      end
+      Enum.reduce(options, Map.new(), fn
+        {section, opts}, acc when is_list(opts) ->
+          Map.put(acc, section, for(o <- opts, do: {o.key, o.value}))
+
+        {key, value}, acc when is_binary(key) and is_binary(value) ->
+          {key, value}
+      end)
+      |> IO.inspect(label: :options)
 
     assigns = assign(assigns, :options, options)
 
     ~H"""
     <.form for={@conn} class="lg:hidden" action={@action}>
       <.input
-        value={@value}
+        value={
+          @options
+          |> Enum.flat_map(fn {_section, opts} -> opts end)
+          |> Enum.find_value(&apply(@selected_fn, [&1]))
+        }
         name={@name}
         type="select"
         options={@options}

diff --git a/lib/plausible_web/templates/layout/settings.html.heex b/lib/plausible_web/templates/layout/settings.html.heex
@@ -1,23 +1,17 @@
 <%= render_layout "app.html", assigns do %>
-  <% account_options = [
-    %{key: "Preferences", value: "preferences", icon: :cog_6_tooth},
-    %{key: "Security", value: "security", icon: :lock_closed},
-    %{key: "Subscription", value: "billing/subscription", icon: :circle_stack},
-    %{key: "Invoices", value: "billing/invoices", icon: :banknotes},
-    %{key: "API Keys", value: "api-keys", icon: :key},
-    %{key: "Danger Zone", value: "danger-zone", icon: :exclamation_triangle}
-  ]
-
-  team_options = [
-    %{key: "General", value: "team/general", icon: :adjustments_horizontal}
-  ]
-
-  account_options =
-    if Plausible.ee?() do
-      account_options
-    else
-      Enum.reject(account_options, fn option -> String.contains?(option.value, "billing") end)
-    end %>
+  <% options = %{
+    "Account Settings" => [
+      %{key: "Preferences", value: "preferences", icon: :cog_6_tooth},
+      %{key: "Security", value: "security", icon: :lock_closed},
+      %{key: "Subscription", value: "billing/subscription", icon: :circle_stack},
+      %{key: "Invoices", value: "billing/invoices", icon: :banknotes},
+      %{key: "API Keys", value: "api-keys", icon: :key},
+      %{key: "Danger Zone", value: "danger-zone", icon: :exclamation_triangle}
+    ],
+    "Team Settings" => [
+      %{key: "General", value: "team/general", icon: :adjustments_horizontal}
+    ]
+  } %>
 
   <div class="container pt-6">
     <.styled_link class="text-indigo-600 font-bold text-sm" href="/sites">
@@ -30,22 +24,25 @@
     </div>
     <div class="lg:grid lg:grid-cols-12 lg:gap-x-5 lg:mt-4">
       <div class="py-4 g:py-0 lg:col-span-3">
-        <div class="mb-4">
+        <div class="mb-4 hidden sm:block">
           <h3 class="uppercase text-sm text-indigo-600 font-semibold">Account Settings</h3>
           <p class="text-xs dark:text-gray-400 truncate"><%= @current_user.email %></p>
         </div>
 
         <.mobile_burger
-          name="team-settings"
-          options={Enum.map(account_options, fn opt -> {opt.key, opt.value} end)}
-          value={Enum.find_value(account_options, &(is_current_tab(@conn, &1.value) && &1.value))}
+          name="settings"
+          options={options}
+          selected_fn={
+            fn {_k, v} ->
+              is_current_tab(@conn, v) && v
+            end
+          }
           conn={@conn}
           href_base="/settings/"
-          prompt="-- Select Account Setting --"
         />
 
         <div class="hidden lg:block">
-          <%= for %{key: key, value: value, icon: icon} <- account_options  do %>
+          <%= for %{key: key, value: value, icon: icon} <- options["Account Settings"]  do %>
             <%= render("_settings_tab.html",
               icon: icon,
               this_tab: value,
@@ -56,22 +53,13 @@
           <% end %>
         </div>
 
-        <div :if={Plausible.Teams.enabled?(@my_team)} class="mb-4 mt-4">
+        <div :if={Plausible.Teams.enabled?(@my_team)} class="mb-4 mt-4 hidden sm:block">
           <h3 class="uppercase text-sm text-indigo-600 font-semibold">Team Settings</h3>
           <p class="text-xs dark:text-gray-400 truncate"><%= @my_team.name %></p>
         </div>
 
-        <.mobile_burger
-          name="team-settings"
-          prompt="-- Select Team Setting --"
-          options={Enum.map(team_options, fn opt -> {opt.key, opt.value} end)}
-          conn={@conn}
-          value={Enum.find_value(team_options, &(is_current_tab(@conn, &1.value) && &1.value))}
-          href_base="/settings/"
-        />
-
         <div class="hidden lg:block">
-          <%= for %{key: key, value: value, icon: icon} <- team_options  do %>
+          <%= for %{key: key, value: value, icon: icon} <- options["Team Settings"]  do %>
             <%= render("_settings_tab.html",
               icon: icon,
               this_tab: value,

diff --git a/lib/plausible_web/templates/layout/site_settings.html.heex b/lib/plausible_web/templates/layout/site_settings.html.heex
@@ -20,7 +20,11 @@
           options={options}
           name="tab"
           href_base={"/#{URI.encode_www_form(@site.domain)}/settings/"}
-          value={Enum.find_value(options, &(is_current_tab(@conn, elem(&1, 1)) && elem(&1, 1)))}
+          selected_fn={
+            fn {_k, v} ->
+              is_current_tab(@conn, v) && v
+            end
+          }
         />
 
         <div class="hidden lg:block">