add live preview pane to page editor

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

test/berrypod_web/live/admin/pages_test.exs

@@ -624,6 +624,83 @@ defmodule BerrypodWeb.Admin.PagesTest do
     end
   end
 
+  describe "live preview" do
+    setup %{conn: conn, user: user} do
+      %{conn: log_in_user(conn, user)}
+    end
+
+    test "preview pane renders page content", %{conn: conn} do
+      {:ok, _view, html} = live(conn, ~p"/admin/pages/home")
+
+      # Preview pane should be in the DOM with the themed class
+      assert html =~ "page-editor-preview themed"
+      # Should render the page via PageRenderer (hero block is on home)
+      assert html =~ "page-editor-preview-pane"
+    end
+
+    test "toggle preview switches between edit and preview on mobile", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/pages/home")
+
+      # Initially: editor visible, preview hidden on mobile
+      assert has_element?(view, ".page-editor-pane:not(.page-editor-pane-hidden-mobile)")
+      assert has_element?(view, ".page-editor-preview-hidden-mobile")
+
+      # Toggle to preview
+      render_click(view, "toggle_preview")
+
+      assert has_element?(view, ".page-editor-pane-hidden-mobile")
+
+      assert has_element?(
+               view,
+               ".page-editor-preview-pane:not(.page-editor-preview-hidden-mobile)"
+             )
+
+      # Toggle back to edit
+      render_click(view, "toggle_preview")
+
+      assert has_element?(view, ".page-editor-pane:not(.page-editor-pane-hidden-mobile)")
+      assert has_element?(view, ".page-editor-preview-hidden-mobile")
+    end
+
+    test "preview updates when block settings change", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/pages/home")
+
+      page = Pages.get_page("home")
+      hero = Enum.at(page.blocks, 0)
+
+      render_click(view, "toggle_expand", %{"id" => hero["id"]})
+
+      render_change(view, "update_block_settings", %{
+        "block_id" => hero["id"],
+        "block_settings" => %{"title" => "Preview test title"}
+      })
+
+      # The preview should show the updated title
+      html = render(view)
+      assert html =~ "Preview test title"
+    end
+
+    test "preview updates after block reorder", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/pages/home")
+
+      page = Pages.get_page("home")
+      first_block = Enum.at(page.blocks, 0)
+
+      render_click(view, "move_down", %{"id" => first_block["id"]})
+
+      # Should still render without errors
+      html = render(view)
+      assert html =~ "page-editor-preview themed"
+    end
+
+    test "preview toggle button shows in header", %{conn: conn} do
+      {:ok, view, _html} = live(conn, ~p"/admin/pages/home")
+
+      # Toggle button should be present
+      assert has_element?(view, ".page-editor-toggle-preview")
+    end
+  end
+
   defp count_repeater_items(html) do
     Regex.scan(~r/class="repeater-item"/, html) |> length()
   end