add image picker to page editor and fix thumbnail layout

Wire up image field in block settings with a modal picker that
browses the media library. Fix picker thumbnails collapsing to
14px by replacing overflow:hidden with overflow:clip on grid
items (hidden sets min-height:0 in grid context). Polish media
library mobile sheet with scrim overlay and tighter spacing.

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

lib/berrypod_web/components/block_editor_components.ex

@@ -233,21 +233,37 @@ defmodule BerrypodWeb.BlockEditorComponents do
               <span :if={@image.alt} class="image-field-alt">{@image.alt}</span>
             </div>
           </div>
-        <% else %>
-          <div class="image-field-empty">
-            <.icon name="hero-photo" class="size-6" />
-            <span>No image selected</span>
+          <div class="image-field-actions">
+            <button
+              type="button"
+              phx-click={"#{@event_prefix}show_image_picker"}
+              phx-value-block-id={@block_id}
+              phx-value-field={@field.key}
+              class="admin-btn admin-btn-outline admin-btn-xs"
+            >
+              Change
+            </button>
+            <button
+              type="button"
+              phx-click={"#{@event_prefix}clear_image"}
+              phx-value-block-id={@block_id}
+              phx-value-field={@field.key}
+              class="admin-btn admin-btn-ghost admin-btn-xs image-field-remove-btn"
+            >
+              Remove
+            </button>
           </div>
+        <% else %>
+          <button
+            type="button"
+            phx-click={"#{@event_prefix}show_image_picker"}
+            phx-value-block-id={@block_id}
+            phx-value-field={@field.key}
+            class="admin-btn admin-btn-outline admin-btn-sm image-field-choose-btn"
+          >
+            <.icon name="hero-photo" class="size-4" /> Choose image
+          </button>
         <% end %>
-        <input
-          type="text"
-          name={"block_settings[#{@field.key}]"}
-          id={"block-#{@block_id}-#{@field.key}"}
-          value={if(@image, do: @image.id, else: "")}
-          placeholder="Paste image ID from media library"
-          class="admin-input admin-input-sm"
-          phx-debounce="blur"
-        />
       </div>
     </div>
     """
@@ -449,4 +465,81 @@ defmodule BerrypodWeb.BlockEditorComponents do
     </div>
     """
   end
+
+  # ── Image picker ──────────────────────────────────────────────
+
+  attr :images, :list, required: true
+  attr :search, :string, required: true
+  attr :event_prefix, :string, default: ""
+
+  def image_picker(assigns) do
+    search = String.downcase(assigns.search)
+
+    filtered =
+      if search == "" do
+        assigns.images
+      else
+        Enum.filter(assigns.images, fn img ->
+          String.contains?(String.downcase(img.filename || ""), search) or
+            String.contains?(String.downcase(img.alt || ""), search)
+        end)
+      end
+
+    assigns = assign(assigns, :filtered_images, filtered)
+
+    ~H"""
+    <div class="image-picker-overlay">
+      <div class="image-picker" phx-click-away={"#{@event_prefix}hide_image_picker"}>
+        <div class="image-picker-header">
+          <h3>Choose image</h3>
+          <button
+            phx-click={"#{@event_prefix}hide_image_picker"}
+            class="admin-btn admin-btn-ghost admin-btn-icon admin-btn-sm"
+            aria-label="Close"
+          >
+            <.icon name="hero-x-mark" class="size-5" />
+          </button>
+        </div>
+
+        <input
+          type="text"
+          placeholder="Search images..."
+          value={@search}
+          phx-keyup={"#{@event_prefix}image_picker_search"}
+          phx-key=""
+          class="admin-input image-picker-search"
+          autofocus
+        />
+
+        <div class="image-picker-grid">
+          <button
+            :for={image <- @filtered_images}
+            type="button"
+            phx-click={"#{@event_prefix}pick_image"}
+            phx-value-image-id={image.id}
+            class="image-picker-item"
+          >
+            <%= if image.is_svg do %>
+              <div class="image-picker-item-svg">
+                <.icon name="hero-code-bracket" class="size-6" />
+              </div>
+            <% else %>
+              <img
+                src={"/image_cache/#{image.id}-thumb.jpg"}
+                alt={image.alt || image.filename}
+                class="image-picker-item-thumb"
+                loading="lazy"
+              />
+            <% end %>
+            <span class="image-picker-item-name">{image.filename}</span>
+          </button>
+
+          <p :if={@filtered_images == []} class="image-picker-empty">
+            No images found.
+          </p>
+        </div>
+      </div>
+    </div>
+    """
+  end
 end

lib/berrypod_web/live/admin/media.ex

@@ -330,6 +330,7 @@ defmodule BerrypodWeb.Admin.Media do
         </div>
 
         <%!-- detail panel --%>
+        <div :if={@selected_image} class="media-detail-scrim" phx-click="deselect_image"></div>
         <aside :if={@selected_image} class="media-detail">
           <div class="media-detail-header">
             <h3>Image details</h3>

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

@@ -34,7 +34,11 @@ defmodule BerrypodWeb.Admin.Pages.Editor do
      |> assign(:show_preview, false)
      |> assign(:preview_data, preview_data)
      |> assign(:logo_image, Media.get_logo())
-     |> assign(:header_image, Media.get_header())}
+     |> assign(:header_image, Media.get_header())
+     |> assign(:image_picker_block_id, nil)
+     |> assign(:image_picker_field_key, nil)
+     |> assign(:image_picker_images, [])
+     |> assign(:image_picker_search, "")}
   end
 
   # ── Block manipulation events ────────────────────────────────────
@@ -150,6 +154,69 @@ defmodule BerrypodWeb.Admin.Pages.Editor do
     end
   end
 
+  # ── Image picker events ──────────────────────────────────────────
+
+  def handle_event(
+        "show_image_picker",
+        %{"block-id" => block_id, "field" => field_key},
+        socket
+      ) do
+    images = Media.list_images()
+
+    {:noreply,
+     socket
+     |> assign(:image_picker_block_id, block_id)
+     |> assign(:image_picker_field_key, field_key)
+     |> assign(:image_picker_images, images)
+     |> assign(:image_picker_search, "")}
+  end
+
+  def handle_event("hide_image_picker", _params, socket) do
+    {:noreply,
+     socket
+     |> assign(:image_picker_block_id, nil)
+     |> assign(:image_picker_field_key, nil)}
+  end
+
+  def handle_event("image_picker_search", %{"value" => value}, socket) do
+    {:noreply, assign(socket, :image_picker_search, value)}
+  end
+
+  def handle_event("pick_image", %{"image-id" => image_id}, socket) do
+    block_id = socket.assigns.image_picker_block_id
+    field_key = socket.assigns.image_picker_field_key
+
+    case BlockEditor.update_settings(socket.assigns.blocks, block_id, %{field_key => image_id}) do
+      {:ok, new_blocks} ->
+        {:noreply,
+         socket
+         |> assign(:blocks, new_blocks)
+         |> assign(:dirty, true)
+         |> assign(:image_picker_block_id, nil)
+         |> assign(:image_picker_field_key, nil)}
+
+      :noop ->
+        {:noreply, socket}
+    end
+  end
+
+  def handle_event(
+        "clear_image",
+        %{"block-id" => block_id, "field" => field_key},
+        socket
+      ) do
+    case BlockEditor.update_settings(socket.assigns.blocks, block_id, %{field_key => ""}) do
+      {:ok, new_blocks} ->
+        {:noreply,
+         socket
+         |> assign(:blocks, new_blocks)
+         |> assign(:dirty, true)}
+
+      :noop ->
+        {:noreply, socket}
+    end
+  end
+
   # ── UI events ────────────────────────────────────────────────────
 
   def handle_event("toggle_expand", %{"id" => block_id}, socket) do
@@ -323,6 +390,13 @@ defmodule BerrypodWeb.Admin.Pages.Editor do
         allowed_blocks={@allowed_blocks}
         filter={@picker_filter}
       />
+
+      <%!-- Image picker modal --%>
+      <.image_picker
+        :if={@image_picker_block_id}
+        images={@image_picker_images}
+        search={@image_picker_search}
+      />
     </div>
     """
   end

lib/berrypod_web/page_editor_hook.ex

@@ -34,6 +34,10 @@ defmodule BerrypodWeb.PageEditorHook do
       |> assign(:editor_live_region_message, nil)
       |> assign(:editor_current_path, nil)
       |> assign(:editor_sidebar_open, true)
+      |> assign(:editor_image_picker_block_id, nil)
+      |> assign(:editor_image_picker_field_key, nil)
+      |> assign(:editor_image_picker_images, [])
+      |> assign(:editor_image_picker_search, "")
       |> attach_hook(:editor_params, :handle_params, &handle_editor_params/3)
       |> attach_hook(:editor_events, :handle_event, &handle_editor_event/3)
       |> attach_hook(:editor_info, :handle_info, &handle_editor_info/2)
@@ -262,6 +266,79 @@ defmodule BerrypodWeb.PageEditorHook do
     {:halt, assign(socket, :editor_picker_filter, value)}
   end
 
+  # ── Image picker actions ───────────────────────────────────────
+
+  defp handle_editor_action(
+         "show_image_picker",
+         %{"block-id" => block_id, "field" => field_key},
+         socket
+       ) do
+    images = Berrypod.Media.list_images()
+
+    {:halt,
+     socket
+     |> assign(:editor_image_picker_block_id, block_id)
+     |> assign(:editor_image_picker_field_key, field_key)
+     |> assign(:editor_image_picker_images, images)
+     |> assign(:editor_image_picker_search, "")}
+  end
+
+  defp handle_editor_action("hide_image_picker", _params, socket) do
+    {:halt,
+     socket
+     |> assign(:editor_image_picker_block_id, nil)
+     |> assign(:editor_image_picker_field_key, nil)}
+  end
+
+  defp handle_editor_action("image_picker_search", %{"value" => value}, socket) do
+    {:halt, assign(socket, :editor_image_picker_search, value)}
+  end
+
+  defp handle_editor_action("pick_image", %{"image-id" => image_id}, socket) do
+    block_id = socket.assigns.editor_image_picker_block_id
+    field_key = socket.assigns.editor_image_picker_field_key
+
+    case BlockEditor.update_settings(socket.assigns.editing_blocks, block_id, %{
+           field_key => image_id
+         }) do
+      {:ok, new_blocks} ->
+        socket =
+          socket
+          |> assign(:editing_blocks, new_blocks)
+          |> assign(:editor_dirty, true)
+          |> assign(:editor_image_picker_block_id, nil)
+          |> assign(:editor_image_picker_field_key, nil)
+          |> reload_block_data(new_blocks)
+
+        {:halt, socket}
+
+      :noop ->
+        {:halt, socket}
+    end
+  end
+
+  defp handle_editor_action(
+         "clear_image",
+         %{"block-id" => block_id, "field" => field_key},
+         socket
+       ) do
+    case BlockEditor.update_settings(socket.assigns.editing_blocks, block_id, %{
+           field_key => ""
+         }) do
+      {:ok, new_blocks} ->
+        socket =
+          socket
+          |> assign(:editing_blocks, new_blocks)
+          |> assign(:editor_dirty, true)
+          |> reload_block_data(new_blocks)
+
+        {:halt, socket}
+
+      :noop ->
+        {:halt, socket}
+    end
+  end
+
   # ── Page actions ─────────────────────────────────────────────────
 
   defp handle_editor_action("save", _params, socket) do
@@ -325,6 +402,10 @@ defmodule BerrypodWeb.PageEditorHook do
     |> assign(:editor_allowed_blocks, allowed)
     |> assign(:editor_live_region_message, nil)
     |> assign(:editor_sidebar_open, true)
+    |> assign(:editor_image_picker_block_id, nil)
+    |> assign(:editor_image_picker_field_key, nil)
+    |> assign(:editor_image_picker_images, [])
+    |> assign(:editor_image_picker_search, "")
   end
 
   defp exit_edit_mode(socket) do
@@ -338,6 +419,10 @@ defmodule BerrypodWeb.PageEditorHook do
     |> assign(:editor_allowed_blocks, nil)
     |> assign(:editor_live_region_message, nil)
     |> assign(:editor_sidebar_open, true)
+    |> assign(:editor_image_picker_block_id, nil)
+    |> assign(:editor_image_picker_field_key, nil)
+    |> assign(:editor_image_picker_images, [])
+    |> assign(:editor_image_picker_search, "")
   end
 
   defp apply_mutation(socket, new_blocks, message, type) do

lib/berrypod_web/page_renderer.ex

@@ -142,6 +142,14 @@ defmodule BerrypodWeb.PageRenderer do
           filter={@editor_picker_filter}
           event_prefix="editor_"
         />
+
+        <%!-- Image picker modal --%>
+        <.image_picker
+          :if={@editor_image_picker_block_id}
+          images={@editor_image_picker_images}
+          search={@editor_image_picker_search}
+          event_prefix="editor_"
+        />
       </aside>
 
       <%!-- Backdrop: tapping the page dismisses the sidebar --%>
@@ -1029,7 +1037,13 @@ defmodule BerrypodWeb.PageRenderer do
           if image.is_svg do
             "/image_cache/#{image.id}.webp"
           else
-            "/image_cache/#{image.id}-800.webp"
+            # Pick the largest variant that was actually generated
+            width =
+              image.source_width
+              |> Berrypod.Images.Optimizer.applicable_widths()
+              |> List.last()
+
+            "/image_cache/#{image.id}-#{width || 400}.webp"
           end
 
         {url, image.alt || image.filename}