From c85fef007f7d3641af6bd889b1b89d1ebf62505a Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 4 Nov 2025 10:14:22 +0100
Subject: [PATCH] Add static UI for adding a segment to a shared link

- Update password UI to use a toogle switch to emphasize the optional nature of the feature
- Add UI for limiting the link to a segment
- Add toggle_field component for full-width label and toggle switch layout
- Add optional link to the input component, showing below the input, which can be used for documentation links
- Add eye icon to shared links list that indicates limited view
- Add tooltips to icons in the shared links list
---
 lib/plausible_web/components/generic.ex       |  55 +++++++-
 lib/plausible_web/live/components/form.ex     |  23 +++-
 .../live/shared_link_settings.ex              |  24 +++-
 .../live/shared_link_settings/form.ex         | 121 +++++++++++++++++-
 4 files changed, 203 insertions(+), 20 deletions(-)

diff --git a/lib/plausible_web/components/generic.ex b/lib/plausible_web/components/generic.ex
index 34eac55db26d..5b3258fb7623 100644
--- a/lib/plausible_web/components/generic.ex
+++ b/lib/plausible_web/components/generic.ex
@@ -391,7 +391,7 @@ defmodule PlausibleWeb.Components.Generic do
       ~H"""
       <.link
         class={[
-          "inline-flex items-center gap-x-0.5",
+          "inline-flex items-center gap-x-1",
           @class
         ]}
         href={@href}
@@ -401,7 +401,7 @@ defmodule PlausibleWeb.Components.Generic do
         {@rest}
       >
         {render_slot(@inner_block)}
-        <Heroicons.arrow_top_right_on_square class={["opacity-60", @icon_class]} />
+        <Heroicons.arrow_top_right_on_square class={["stroke-2", @icon_class]} />
       </.link>
       """
     else
@@ -469,6 +469,51 @@ defmodule PlausibleWeb.Components.Generic do
     """
   end
 
+  attr :id, :string, required: true
+  attr :js_active_var, :string, required: true
+  attr :id_suffix, :string, default: ""
+  attr :disabled, :boolean, default: false
+  attr :label, :string, required: true
+  attr :help_text, :string, default: nil
+  attr :help_text_conditional, :boolean, default: false
+  attr :mt?, :boolean, default: true
+
+  attr(:rest, :global)
+
+  def toggle_field(assigns) do
+    help_text_conditional = assigns[:help_text_conditional] || false
+
+    assigns = assign(assigns, help_text_conditional: help_text_conditional)
+
+    ~H"""
+    <div class={["flex items-start justify-between gap-5 w-full", @mt? && "mt-6"]}>
+      <div class="flex-1">
+        <span
+          x-on:click={"#{@js_active_var} = !#{@js_active_var}"}
+          class="text-sm font-medium text-gray-900 dark:text-gray-100 cursor-pointer"
+        >
+          {@label}
+        </span>
+        <p
+          :if={@help_text}
+          class="text-gray-500 dark:text-gray-400 text-sm text-pretty"
+          x-show={if @help_text_conditional, do: @js_active_var, else: "true"}
+          x-cloak={@help_text_conditional}
+        >
+          {@help_text}
+        </p>
+      </div>
+      <PlausibleWeb.Components.Generic.toggle_switch
+        id={@id}
+        id_suffix={@id_suffix}
+        js_active_var={@js_active_var}
+        disabled={@disabled}
+        {@rest}
+      />
+    </div>
+    """
+  end
+
   def settings_tiles(assigns) do
     ~H"""
     <div class="text-gray-900 leading-5 dark:text-gray-100">
@@ -676,9 +721,9 @@ defmodule PlausibleWeb.Components.Generic do
 
     if String.contains?(classes, "text-sm") or
          String.contains?(classes, "text-xs") do
-      ["w-3 h-3"]
+      ["size-3"]
     else
-      ["w-4 h-4"]
+      ["size-4"]
     end
   end
 
@@ -786,7 +831,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-3 first:pl-0 last:pr-0 whitespace-nowrap overflow-visible",
         @truncate && "truncate",
         @max_width,
         @actions && "flex text-right justify-end",
diff --git a/lib/plausible_web/live/components/form.ex b/lib/plausible_web/live/components/form.ex
index 04d463ac22bb..8b46b1f2e8b7 100644
--- a/lib/plausible_web/live/components/form.ex
+++ b/lib/plausible_web/live/components/form.ex
@@ -54,6 +54,7 @@ defmodule PlausibleWeb.Live.Components.Form do
   attr(:max_one_error, :boolean, default: false)
   slot(:help_content)
   slot(:inner_block)
+  slot(:link)
 
   def input(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
     errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []
@@ -74,8 +75,14 @@ defmodule PlausibleWeb.Live.Components.Form do
 
   def input(%{type: "select"} = assigns) do
     ~H"""
-    <div class={@mt? && "mt-4"}>
-      <.label for={@id} class={if @help_text, do: "mb-0.5", else: "mb-1.5"}>{@label}</.label>
+    <div class={@mt? && "mt-6"}>
+      <.label
+        :if={@label != nil and @label != ""}
+        for={@id}
+        class={if @help_text, do: "mb-0.5", else: "mb-1.5"}
+      >
+        {@label}
+      </.label>
 
       <p :if={@help_text} class="text-gray-500 dark:text-gray-400 mb-2 text-sm">
         {@help_text}
@@ -84,6 +91,9 @@ defmodule PlausibleWeb.Live.Components.Form do
         <option :if={@prompt} value="">{@prompt}</option>
         {Phoenix.HTML.Form.options_for_select(@options, @value)}
       </select>
+      <div :if={@link != [] && Enum.empty?(@errors)} class="mt-1">
+        {render_slot(@link)}
+      </div>
       <.error :for={msg <- @errors}>{msg}</.error>
     </div>
     """
@@ -138,7 +148,7 @@ defmodule PlausibleWeb.Live.Components.Form do
 
         <span
           :if={@help_text || @help_content != []}
-          class="text-gray-500 dark:text-gray-400 mb-2 text-sm"
+          class="text-gray-500 dark:text-gray-400 mb-2 text-sm text-pretty"
         >
           {@help_text}
           {render_slot(@help_content)}
@@ -150,7 +160,7 @@ defmodule PlausibleWeb.Live.Components.Form do
 
   def input(%{type: "textarea"} = assigns) do
     ~H"""
-    <div class={@mt? && "mt-4"}>
+    <div class={@mt? && "mt-6"}>
       <.label class="mb-1.5" for={@id}>{@label}</.label>
       <textarea
         id={@id}
@@ -176,7 +186,7 @@ defmodule PlausibleWeb.Live.Components.Form do
     assigns = assign(assigns, :errors, errors)
 
     ~H"""
-    <div class={@mt? && "mt-4"}>
+    <div class={@mt? && "mt-6"}>
       <.label
         :if={@label != nil and @label != ""}
         for={@id}
@@ -196,6 +206,9 @@ defmodule PlausibleWeb.Live.Components.Form do
         {@rest}
       />
       {render_slot(@inner_block)}
+      <div :if={@link != [] && Enum.empty?(@errors)} class="mt-0.5">
+        {render_slot(@link)}
+      </div>
       <.error :for={msg <- @errors}>
         {msg}
       </.error>
diff --git a/lib/plausible_web/live/shared_link_settings.ex b/lib/plausible_web/live/shared_link_settings.ex
index 5bd7152d287d..55d1949c0c2e 100644
--- a/lib/plausible_web/live/shared_link_settings.ex
+++ b/lib/plausible_web/live/shared_link_settings.ex
@@ -86,9 +86,27 @@ defmodule PlausibleWeb.Live.SharedLinkSettings do
         </:thead>
         <:tbody :let={link}>
           <.td truncate hide_on_mobile>
-            {link.name}
-            <Heroicons.lock_closed :if={link.password_hash} class="feather ml-2 mb-0.5" />
-            <Heroicons.lock_open :if={!link.password_hash} class="feather ml-2 mb-0.5" />
+            <div class="flex items-center">
+              {link.name}
+              <.tooltip :if={link.password_hash} enabled?={true} centered?={true}>
+                <:tooltip_content>
+                  Password protected
+                </:tooltip_content>
+                <Heroicons.lock_closed class="feather ml-2 mb-0.5" />
+              </.tooltip>
+              <.tooltip :if={!link.password_hash} enabled?={true} centered?={true}>
+                <:tooltip_content>
+                  No password protection
+                </:tooltip_content>
+                <Heroicons.lock_open class="feather ml-2 mb-0.5" />
+              </.tooltip>
+              <.tooltip enabled?={true} centered?={true}>
+                <:tooltip_content>
+                  Limited view
+                </:tooltip_content>
+                <Heroicons.eye_slash class="feather ml-1" />
+              </.tooltip>
+            </div>
           </.td>
           <.td>
             <.input_with_clipboard
diff --git a/lib/plausible_web/live/shared_link_settings/form.ex b/lib/plausible_web/live/shared_link_settings/form.ex
index e4ff0effc53a..e10d8ef89cfc 100644
--- a/lib/plausible_web/live/shared_link_settings/form.ex
+++ b/lib/plausible_web/live/shared_link_settings/form.ex
@@ -43,6 +43,46 @@ defmodule PlausibleWeb.Live.SharedLinkSettings.Form do
 
       <.input field={f[:name]} label="Name" required="required" autocomplete="off" />
 
+      <div
+        x-data="{ limitViewEnabled: false }"
+        x-effect={"
+          const select = document.getElementById('segment_id');
+          if (select && !limitViewEnabled) {
+            select.value = '';
+          }
+        "}
+        class="flex flex-col gap-y-2"
+      >
+        <PlausibleWeb.Components.Generic.toggle_field
+          id="limit-view"
+          id_suffix=""
+          js_active_var="limitViewEnabled"
+          label="Limit view"
+          help_text="Filter your dashboard to show only a segment."
+        />
+        <div x-show="limitViewEnabled" x-cloak>
+          <.input
+            name="segment_id"
+            id="segment_id"
+            type="select"
+            value=""
+            options={[{"Filter by segment", ""}]}
+            prompt="Filter by segment"
+            mt?={false}
+          >
+            <:link>
+              <PlausibleWeb.Components.Generic.unstyled_link
+                href="https://plausible.io/docs/segments"
+                new_tab
+                class="text-xs text-indigo-600 dark:text-indigo-400"
+              >
+                Learn about segments
+              </PlausibleWeb.Components.Generic.unstyled_link>
+            </:link>
+          </.input>
+        </div>
+      </div>
+
       <.button type="submit" class="w-full">
         Update shared link
       </.button>
@@ -55,13 +95,80 @@ defmodule PlausibleWeb.Live.SharedLinkSettings.Form do
     <.form :let={f} for={@form} phx-submit="save-shared-link" phx-target={@myself}>
       <.title>New shared link</.title>
       <.input field={f[:name]} label="Name" required="required" autocomplete="off" />
-      <.input
-        field={f[:password]}
-        label="Password (optional)"
-        help_text="Store the password securely, as it can't be viewed again."
-        type="password"
-        autocomplete="new-password"
-      />
+
+      <div
+        x-data="{ passwordProtectEnabled: false }"
+        x-effect={"
+          const input = document.getElementById('#{f[:password].id}');
+          if (input) {
+            if (passwordProtectEnabled) {
+              setTimeout(() => input.focus(), 50);
+            } else {
+              input.value = '';
+            }
+          }
+        "}
+        class="flex flex-col gap-y-2"
+      >
+        <PlausibleWeb.Components.Generic.toggle_field
+          id="password-protect"
+          id_suffix=""
+          js_active_var="passwordProtectEnabled"
+          label="Password protect"
+          help_text="Keep this password safe. You won't be able to see it again."
+          help_text_conditional={true}
+        />
+        <div x-show="passwordProtectEnabled" x-cloak>
+          <.input
+            field={f[:password]}
+            type="password"
+            placeholder="Enter password"
+            autocomplete="new-password"
+            mt?={false}
+          />
+        </div>
+      </div>
+
+      <div
+        x-data="{ limitViewEnabled: false }"
+        x-effect={"
+          const select = document.getElementById('segment_id');
+          if (select && !limitViewEnabled) {
+            select.value = '';
+          }
+        "}
+        class="flex flex-col gap-y-2"
+      >
+        <PlausibleWeb.Components.Generic.toggle_field
+          id="limit-view"
+          id_suffix=""
+          js_active_var="limitViewEnabled"
+          label="Limit view"
+          help_text="Filter your dashboard to show only a segment."
+        />
+        <div x-show="limitViewEnabled" x-cloak>
+          <.input
+            name="segment_id"
+            id="segment_id"
+            type="select"
+            value=""
+            options={[{"Filter by segment", ""}]}
+            prompt="Filter by segment"
+            mt?={false}
+          >
+            <:link>
+              <PlausibleWeb.Components.Generic.unstyled_link
+                href="https://plausible.io/docs/filters-segments#how-to-save-a-segment"
+                new_tab
+                class="text-xs text-indigo-600 dark:text-indigo-400"
+              >
+                Learn about segments
+              </PlausibleWeb.Components.Generic.unstyled_link>
+            </:link>
+          </.input>
+        </div>
+      </div>
+
       <.button type="submit" class="w-full">
         Create shared link
       </.button>