add page builder polish: utility blocks, templates, duplicate

New block types: spacer, divider, button/CTA, video embed (YouTube,
Vimeo with privacy-enhanced embeds, fallback for unknown URLs).

Page templates (blank, content, landing) shown when creating custom
pages. Duplicate page action on admin index with slug deduplication.

Fix block picker on shop edit sidebar being cut off on mobile by
accounting for bottom nav and making the grid scrollable.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

lib/berrypod_web/live/admin/pages/custom_form.ex

@@ -2,7 +2,7 @@ defmodule BerrypodWeb.Admin.Pages.CustomForm do
   use BerrypodWeb, :live_view
 
   alias Berrypod.Pages
-  alias Berrypod.Pages.Page
+  alias Berrypod.Pages.{Defaults, Page}
 
   @impl true
   def mount(params, _session, socket) do
@@ -16,6 +16,7 @@ defmodule BerrypodWeb.Admin.Pages.CustomForm do
     |> assign(:page_title, "New page")
     |> assign(:page_struct, %Page{})
     |> assign(:slug_touched, false)
+    |> assign(:selected_template, "blank")
     |> assign(:form, to_form(changeset))
   end
 
@@ -53,12 +54,20 @@ defmodule BerrypodWeb.Admin.Pages.CustomForm do
     {:noreply, assign(socket, form: form, slug_touched: slug_touched)}
   end
 
+  @impl true
+  def handle_event("select_template", %{"key" => key}, socket) do
+    {:noreply, assign(socket, :selected_template, key)}
+  end
+
   @impl true
   def handle_event("save", %{"page" => params}, socket) do
     save_page(socket, socket.assigns.live_action, params)
   end
 
   defp save_page(socket, :new, params) do
+    template_blocks = Defaults.template_blocks(socket.assigns.selected_template)
+    params = Map.put(params, "blocks", template_blocks)
+
     case Pages.create_custom_page(params) do
       {:ok, page} ->
         {:noreply,
@@ -120,6 +129,25 @@ defmodule BerrypodWeb.Admin.Pages.CustomForm do
       {if @live_action == :new, do: "New page", else: "Page settings"}
     </.header>
 
+    <div :if={@live_action == :new} class="template-picker">
+      <p class="template-picker-label">Start from a template</p>
+      <div class="template-picker-cards">
+        <button
+          :for={tmpl <- Defaults.templates()}
+          type="button"
+          phx-click="select_template"
+          phx-value-key={tmpl.key}
+          class={[
+            "template-card",
+            assigns[:selected_template] == tmpl.key && "template-card-selected"
+          ]}
+        >
+          <span class="template-card-name">{tmpl.label}</span>
+          <span class="template-card-desc">{tmpl.description}</span>
+        </button>
+      </div>
+    </div>
+
     <.form
       for={@form}
       id="custom-page-form"

lib/berrypod_web/live/admin/pages/index.ex

@@ -40,6 +40,26 @@ defmodule BerrypodWeb.Admin.Pages.Index do
     end
   end
 
+  @impl true
+  def handle_event("duplicate_custom_page", %{"slug" => slug}, socket) do
+    case Pages.get_page_struct(slug) do
+      %{type: "custom"} = page ->
+        case Pages.duplicate_custom_page(page) do
+          {:ok, copy} ->
+            {:noreply,
+             socket
+             |> assign(:custom_pages, Pages.list_custom_pages())
+             |> put_flash(:info, "\"#{copy.title}\" created as draft")}
+
+          {:error, _} ->
+            {:noreply, put_flash(socket, :error, "Failed to duplicate page")}
+        end
+
+      _ ->
+        {:noreply, put_flash(socket, :error, "Page not found")}
+    end
+  end
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -101,6 +121,14 @@ defmodule BerrypodWeb.Admin.Pages.Index do
               </span>
               <.icon name="hero-chevron-right-mini" class="size-4 page-card-arrow" />
             </.link>
+            <button
+              phx-click="duplicate_custom_page"
+              phx-value-slug={page.slug}
+              class="page-card-action"
+              aria-label={"Duplicate #{page.title}"}
+            >
+              <.icon name="hero-document-duplicate" class="size-4" />
+            </button>
             <button
               phx-click="delete_custom_page"
               phx-value-slug={page.slug}

lib/berrypod_web/page_renderer.ex

@@ -965,6 +965,87 @@ defmodule BerrypodWeb.PageRenderer do
     """
   end
 
+  # ── Utility blocks ──────────────────────────────────────────────
+
+  defp render_block(%{block: %{"type" => "spacer"}} = assigns) do
+    size = get_in(assigns.block, ["settings", "size"]) || "medium"
+    assigns = assign(assigns, :size, size)
+
+    ~H"""
+    <div class="block-spacer" data-size={@size} aria-hidden="true"></div>
+    """
+  end
+
+  defp render_block(%{block: %{"type" => "divider"}} = assigns) do
+    style = get_in(assigns.block, ["settings", "style"]) || "line"
+    assigns = assign(assigns, :style, style)
+
+    ~H"""
+    <hr class="block-divider" data-style={@style} />
+    """
+  end
+
+  defp render_block(%{block: %{"type" => "button"}} = assigns) do
+    settings = assigns.block["settings"] || %{}
+
+    assigns =
+      assigns
+      |> assign(:text, settings["text"] || "Learn more")
+      |> assign(:href, settings["href"] || "/")
+      |> assign(:btn_style, settings["style"] || "primary")
+      |> assign(:alignment, settings["alignment"] || "centre")
+
+    ~H"""
+    <div class="block-button" data-align={@alignment}>
+      <.link
+        navigate={@href}
+        class={if @btn_style == "outline", do: "themed-button-outline", else: "themed-button"}
+      >
+        {@text}
+      </.link>
+    </div>
+    """
+  end
+
+  defp render_block(%{block: %{"type" => "video_embed"}} = assigns) do
+    settings = assigns.block["settings"] || %{}
+    url = settings["url"] || ""
+    caption = settings["caption"] || ""
+    aspect_ratio = settings["aspect_ratio"] || "16:9"
+
+    {provider, embed_url} = parse_video_url(url)
+
+    assigns =
+      assigns
+      |> assign(:embed_url, embed_url)
+      |> assign(:provider, provider)
+      |> assign(:caption, caption)
+      |> assign(:aspect_ratio, aspect_ratio)
+      |> assign(:raw_url, url)
+
+    ~H"""
+    <div class="page-container">
+      <div :if={@provider != :unknown} class="video-embed" data-ratio={@aspect_ratio}>
+        <iframe
+          src={@embed_url}
+          frameborder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+          loading="lazy"
+          title={if @caption != "", do: @caption, else: "Embedded video"}
+        >
+        </iframe>
+      </div>
+      <p :if={@provider == :unknown && @raw_url != ""} class="video-embed-fallback">
+        <a href={@raw_url} target="_blank" rel="noopener noreferrer">
+          {if @caption != "", do: @caption, else: "Watch video"}
+        </a>
+      </p>
+      <p :if={@caption != "" && @provider != :unknown} class="video-embed-caption">{@caption}</p>
+    </div>
+    """
+  end
+
   # ── Fallback ────────────────────────────────────────────────────
 
   defp render_block(assigns) do
@@ -1073,6 +1154,24 @@ defmodule BerrypodWeb.PageRenderer do
     end
   end
 
+  @youtube_re ~r/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/
+  @vimeo_re ~r/vimeo\.com\/(?:video\/)?(\d+)/
+
+  defp parse_video_url(url) when is_binary(url) do
+    cond do
+      match = Regex.run(@youtube_re, url) ->
+        {:youtube, "https://www.youtube-nocookie.com/embed/#{Enum.at(match, 1)}"}
+
+      match = Regex.run(@vimeo_re, url) ->
+        {:vimeo, "https://player.vimeo.com/video/#{Enum.at(match, 1)}?dnt=1"}
+
+      true ->
+        {:unknown, nil}
+    end
+  end
+
+  defp parse_video_url(_), do: {:unknown, nil}
+
   def format_order_status("unfulfilled"), do: "Being prepared"
   def format_order_status("submitted"), do: "Sent to printer"
   def format_order_status("processing"), do: "In production"