Updated empty states across settings

extra/lib/plausible_web/live/funnel_settings.ex

@@ -70,15 +70,20 @@ defmodule PlausibleWeb.Live.FunnelSettings do
         />
       </div>
 
-      <div :if={@goal_count < Funnel.min_steps()} class="flex flex-col items-center">
-        <h1 class="mt-4 text-center">
+      <div
+        :if={@goal_count < Funnel.min_steps()}
+        class="flex flex-col items-center justify-center pt-5 pb-6 max-w-md mx-auto"
+      >
+        <h3 class="text-center text-base font-medium text-gray-900 dark:text-gray-100 leading-7">
           Ready to dig into user flows?
-        </h1>
-        <p class="mt-4 mb-6 max-w-lg text-sm text-gray-500 dark:text-gray-400 leading-5 text-center">
-          Set up a few goals first (e.g. <b>"Signup"</b>, <b>"Visit /"</b>, or <b>"Scroll 50% on /blog/*"</b>) and return here to build your first funnel!
+        </h3>
+        <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
+          Set up a few goals like <span class="font-medium text-indigo-600 dark:text-gray-100">Signup</span>, <span class="font-medium text-indigo-600 dark:text-gray-100">Visit /</span>, or
+          <span class="font-medium text-indigo-600 dark:text-gray-100">Scroll 50% on /blog/*</span>
+          first, then return here to build your first funnel.
         </p>
         <.button_link
-          class="mb-2"
+          class="mt-4"
           href={PlausibleWeb.Router.Helpers.site_path(@socket, :settings_goals, @domain)}
         >
           Set up goals →

extra/lib/plausible_web/live/funnel_settings/list.ex

@@ -12,11 +12,13 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
   def render(assigns) do
     ~H"""
     <div>
-      <.filter_bar filter_text={@filter_text} placeholder="Search Funnels">
-        <.button id="add-funnel-button" phx-click="add-funnel" mt?={false}>
-          Add funnel
-        </.button>
-      </.filter_bar>
+      <%= if String.trim(@filter_text) != "" || Enum.count(@funnels) > 0 do %>
+        <.filter_bar filter_text={@filter_text} placeholder="Search Funnels">
+          <.button id="add-funnel-button" phx-click="add-funnel" mt?={false}>
+            Add funnel
+          </.button>
+        </.filter_bar>
+      <% end %>
 
       <%= if Enum.count(@funnels) > 0 do %>
         <.table rows={@funnels}>
@@ -42,17 +44,33 @@ defmodule PlausibleWeb.Live.FunnelSettings.List do
           </:tbody>
         </.table>
       <% else %>
-        <p class="mt-12 mb-8 text-sm text-center">
-          <span :if={String.trim(@filter_text) != ""}>
+        <%= if String.trim(@filter_text) != "" do %>
+          <p class="mt-12 mb-8 text-sm text-center">
             No funnels found for this site. Please refine or
             <.styled_link phx-click="reset-filter-text" id="reset-filter-hint">
               reset your search.
             </.styled_link>
-          </span>
-          <span :if={String.trim(@filter_text) == "" && Enum.empty?(@funnels)}>
-            No funnels configured for this site.
-          </span>
-        </p>
+          </p>
+        <% else %>
+          <div class="flex flex-col items-center justify-center pt-5 pb-6 max-w-md mx-auto">
+            <h3 class="text-center text-base font-medium text-gray-900 dark:text-gray-100 leading-7">
+              Create your first funnel
+            </h3>
+            <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
+              Compose goals into funnels to track user flows and conversion rates.
+              <.styled_link href="https://plausible.io/docs/funnel-analysis" target="_blank">
+                Learn more
+              </.styled_link>
+            </p>
+            <.button
+              id="add-funnel-button"
+              phx-click="add-funnel"
+              class="mt-4"
+            >
+              Add funnel
+            </.button>
+          </div>
+        <% end %>
       <% end %>
     </div>
     """

lib/plausible_web/components/generic.ex

@@ -487,6 +487,7 @@ defmodule PlausibleWeb.Components.Generic do
   attr :current_team, :any, default: nil
   attr :site, :any
   attr :conn, :any
+  attr :show_content?, :boolean, default: true
 
   def tile(assigns) do
     ~H"""
@@ -507,8 +508,8 @@ defmodule PlausibleWeb.Components.Generic do
           conn={@conn}
         />
       </header>
-      <div class="border-b dark:border-gray-700 mx-6"></div>
-      <div class="relative">
+      <div :if={@show_content?} class="border-b dark:border-gray-700 mx-6"></div>
+      <div :if={@show_content?} class="relative">
         <%= if @feature_mod do %>
           <PlausibleWeb.Components.Billing.feature_gate
             locked?={@feature_mod.check_availability(@current_team) != :ok}

lib/plausible_web/components/site/feature.ex

@@ -26,7 +26,7 @@ defmodule PlausibleWeb.Components.Site.Feature do
         class={@class}
       >
         <.toggle_submit set_to={@current_setting} disabled?={@disabled?}>
-          Show {String.downcase(@feature_mod.display_name())} in the dashboard
+          Show in dashboard
         </.toggle_submit>
       </.form>
 

lib/plausible_web/controllers/site_controller.ex

@@ -163,36 +163,75 @@ defmodule PlausibleWeb.SiteController do
   def settings_visibility(conn, _params) do
     site = conn.assigns[:site]
 
+    has_shared_links? =
+      Repo.exists?(
+        from(l in Plausible.Site.SharedLink,
+          where:
+            l.site_id == ^site.id and
+              l.name not in ^Plausible.Sites.shared_link_special_names()
+        )
+      )
+
     conn
     |> render("settings_visibility.html",
       site: site,
+      has_shared_links?: has_shared_links?,
       dogfood_page_path: "/:dashboard/settings/visibility",
       connect_live_socket: true,
       layout: {PlausibleWeb.LayoutView, "site_settings.html"}
     )
   end
 
   def settings_goals(conn, _params) do
+    site = conn.assigns[:site]
+
+    has_goals? =
+      Repo.exists?(
+        from(g in Plausible.Goal,
+          where: g.site_id == ^site.id
+        )
+      )
+
     conn
     |> render("settings_goals.html",
+      site: site,
+      has_goals?: has_goals?,
       dogfood_page_path: "/:dashboard/settings/goals",
       connect_live_socket: true,
       layout: {PlausibleWeb.LayoutView, "site_settings.html"}
     )
   end
 
   def settings_funnels(conn, _params) do
+    site = conn.assigns[:site]
+
+    has_funnels? =
+      Repo.exists?(
+        from(f in Plausible.Funnel,
+          where: f.site_id == ^site.id
+        )
+      )
+
     conn
     |> render("settings_funnels.html",
+      site: site,
+      has_funnels?: has_funnels?,
       dogfood_page_path: "/:dashboard/settings/funnels",
       connect_live_socket: true,
       layout: {PlausibleWeb.LayoutView, "site_settings.html"}
     )
   end
 
   def settings_props(conn, _params) do
+    site = conn.assigns[:site]
+
+    has_props? =
+      site.allowed_event_props && length(site.allowed_event_props) > 0
+
     conn
     |> render("settings_props.html",
+      site: site,
+      has_props?: has_props?,
       dogfood_page_path: "/:dashboard/settings/properties",
       layout: {PlausibleWeb.LayoutView, "site_settings.html"},
       connect_live_socket: true
@@ -267,9 +306,17 @@ defmodule PlausibleWeb.SiteController do
   def settings_imports_exports(conn, _params) do
     site = conn.assigns.site
 
+    has_imports? =
+      Repo.exists?(
+        from(i in Plausible.Imported.SiteImport,
+          where: i.site_id == ^site.id
+        )
+      )
+
     conn
     |> render("settings_imports_exports.html",
       site: site,
+      has_imports?: has_imports?,
       dogfood_page_path: "/:dashboard/settings/imports-exports",
       connect_live_socket: true,
       layout: {PlausibleWeb.LayoutView, "site_settings.html"}

lib/plausible_web/live/goal_settings/list.ex

@@ -16,17 +16,19 @@ defmodule PlausibleWeb.Live.GoalSettings.List do
 
     ~H"""
     <div>
-      <.filter_bar filter_text={@filter_text} placeholder="Search Goals">
-        <.button
-          id="add-goal-button"
-          phx-click="add-goal"
-          mt?={false}
-          x-data
-          x-on:click={Modal.JS.preopen("goals-form-modal")}
-        >
-          Add goal
-        </.button>
-      </.filter_bar>
+      <%= if String.trim(@filter_text) != "" || Enum.count(@goals) > 0 do %>
+        <.filter_bar filter_text={@filter_text} placeholder="Search Goals">
+          <.button
+            id="add-goal-button"
+            phx-click="add-goal"
+            mt?={false}
+            x-data
+            x-on:click={Modal.JS.preopen("goals-form-modal")}
+          >
+            Add goal
+          </.button>
+        </.filter_bar>
+      <% end %>
 
       <%= if Enum.count(@goals) > 0 do %>
         <.table rows={@goals}>
@@ -89,17 +91,35 @@ defmodule PlausibleWeb.Live.GoalSettings.List do
           </:tbody>
         </.table>
       <% else %>
-        <p class="mt-12 mb-8 text-center text-sm">
-          <span :if={String.trim(@filter_text) != ""}>
+        <%= if String.trim(@filter_text) != "" do %>
+          <p class="mt-12 mb-8 text-center text-sm">
             No goals found for this site. Please refine or
             <.styled_link phx-click="reset-filter-text" id="reset-filter-hint">
               reset your search.
             </.styled_link>
-          </span>
-          <span :if={String.trim(@filter_text) == "" && Enum.empty?(@goals)}>
-            No goals configured for this site.
-          </span>
-        </p>
+          </p>
+        <% else %>
+          <div class="flex flex-col items-center justify-center pt-5 pb-6 max-w-md mx-auto">
+            <h3 class="text-center text-base font-medium text-gray-900 dark:text-gray-100 leading-7">
+              Create your first goal
+            </h3>
+            <p class="text-center text-sm mt-1 text-gray-500 dark:text-gray-400 leading-5 text-pretty">
+              Define actions that you want your users to take, like visiting a certain page, submitting a form, etc.
+              <.styled_link href="https://plausible.io/docs/goal-conversions" target="_blank">
+                Learn more
+              </.styled_link>
+            </p>
+            <.button
+              id="add-goal-button"
+              phx-click="add-goal"
+              x-data
+              x-on:click={Modal.JS.preopen("goals-form-modal")}
+              class="mt-4"
+            >
+              Add goal
+            </.button>
+          </div>
+        <% end %>
       <% end %>
     </div>
     """