[WIP] Spike sidebar in liveview

.formatter.exs

@@ -4,7 +4,7 @@ locals_without_parens = [
 ]
 
 [
-  import_deps: [:phoenix, :beacon],
+  import_deps: [:phoenix, :phoenix_live_view, :ecto, :beacon],
   plugins: [Phoenix.LiveView.HTMLFormatter],
   migrate_eex_to_curly_interpolation: false,
   inputs: ["*.{heex,ex,exs}", "{config,lib,test}/**/*.{heex,ex,exs}"],

.gitignore

@@ -26,6 +26,7 @@ erl_crash.dump
 beacon_live_admin-*.tar
 
 # Ignore assets that are produced by build tools.
+/assets/css/app.css
 /priv/static/assets/
 
 # Ignore digested assets cache.

assets/js/beacon_live_admin.js

@@ -1,9 +1,13 @@
 import topbar from "../vendor/topbar"
 import { CodeEditorHook } from "../../deps/live_monaco_editor/priv/static/live_monaco_editor.esm"
 import { getHooks } from "live_svelte"
+import visualEditorHooks from "../../lib/beacon/live_admin/components/visual_editor/hooks"
 import * as Components from "../svelte/**/*.svelte"
+
 let Hooks = {}
+
 Hooks.CodeEditorHook = CodeEditorHook
+
 topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" })
 window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300))
 window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide())
@@ -48,7 +52,7 @@ window.addEventListener("beacon_admin:clipcopy", (event) => {
 let socketPath = document.querySelector("html").getAttribute("phx-socket") || "/live"
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 let liveSocket = new LiveView.LiveSocket(socketPath, Phoenix.Socket, {
-  hooks: { ...getHooks(Components), ...Hooks },
+  hooks: { ...getHooks(Components), ...visualEditorHooks, ...Hooks },
   params: { _csrf_token: csrfToken },
 })
 liveSocket.connect()

assets/svelte/components/GoToParentButton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { setSelection, selectedAstElementId } from "$lib/stores/page"
+  import { getParentNodeId } from "$lib/utils/ast-helpers"
+
+  function selectParentNode() {
+    let parentId = getParentNodeId($selectedAstElementId)
+    setSelection(parentId)
+  }
+</script>
+
+<button type="button" class="absolute p-2 top-2 right-9 group" on:click={selectParentNode}>
+  <span class="sr-only">Up one level</span>
+  <span
+    class="absolute opacity-0 invisible right-9 min-w-[100px] bg-amber-100 py-1 px-1.5 rounded text-xs text-medium transition group-hover:opacity-100 group-hover:visible"
+    >Up one level</span
+  >
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="w-6 h-6 hover:text-blue-700 active:text-blue-900"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M3 4.5h14.25M3 9h9.75M3 13.5h5.25m5.25-.75L17.25 9m0 0L21 12.75M17.25 9v12"
+    />
+  </svg>
+</button>

assets/svelte/components/PropertiesSidebar.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte"
   import Pill from "$lib/components/Pill.svelte"
+  import ResetSelectionButton from "$lib/components/ResetSelectionButton.svelte"
   import SidebarSection from "$lib/components/SidebarSection.svelte"
   import { draggedComponentDefinition } from "$lib/stores/dragAndDrop"
   import { live } from "$lib/stores/live"
   import {
     page,
     selectedAstElement,
     selectedAstElementId,
-    findAstElement,
     isAstElement,
     setSelection,
     resetSelection,
@@ -168,21 +168,8 @@
             </svg>
           </button>
         {/if}
-        <button type="button" class="absolute p-2 top-2 right-1" on:click={resetSelection}>
-          <span class="sr-only">Close</span>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            class="w-6 h-6 hover:text-blue-700 active:text-blue-900"
-          >
-            <path
-              fill-rule="evenodd"
-              d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z"
-              clip-rule="evenodd"
-            />
-          </svg>
-        </button>
+        <ResetSelectionButton />
+        =
       </div>
       {#if attributesEditable}
         <SidebarSection clearOnUpdate={true} on:update={addClasses} disableDelete={true} placeholder="Add new class">

assets/svelte/components/ResetSelectionButton.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { resetSelection } from "$lib/stores/page"
+</script>
+
+<button type="button" class="absolute p-2 top-2 right-1" on:click={resetSelection}>
+  <span class="sr-only">Close</span>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    class="w-6 h-6 hover:text-blue-700 active:text-blue-900"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-1.72 6.97a.75.75 0 1 0-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06L12 13.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L13.06 12l1.72-1.72a.75.75 0 1 0-1.06-1.06L12 10.94l-1.72-1.72Z"
+      clip-rule="evenodd"
+    />
+  </svg>
+</button>

assets/svelte/components/UiBuilder.svelte

@@ -16,6 +16,7 @@
   export let tailwindConfig: string
   export let tailwindInput: string
   export let live
+
   $: $pageStore = page
   $: $tailwindConfigStore = tailwindConfig
   $: $tailwindInputStore = tailwindInput
@@ -24,22 +25,15 @@
   onDestroy(() => {
     resetStores()
   })
-
-  function addBasicComponentToTarget(e: CustomEvent) {
-    // This method is in PagePreview.
-  }
 </script>
 
-<Backdrop />
 <div class="flex min-h-screen bg-gray-100" id="ui-builder-app-container" data-testid="app-container">
+  <Backdrop />
   <!-- Left sidebar -->
   <ComponentsSidebar {components} />
 
   <!-- Main -->
   <PagePreview />
 
-  <!-- Right sidebar -->
-  <PropertiesSidebar on:droppedIntoTarget={(e) => addBasicComponentToTarget(e.detail)} />
-
   <SelectedElementFloatingMenu />
 </div>

assets/svelte/stores/page.ts

@@ -1,6 +1,7 @@
 import { writable, derived, get } from "svelte/store"
 import type { Writable, Readable } from "svelte/store"
 import type { AstElement, AstNode, Page } from "$lib/types"
+import { live } from "$lib/stores/live"
 
 export const page: Writable<Page> = writable()
 export const selectedAstElementId: Writable<string | undefined> = writable()
@@ -17,7 +18,11 @@ export const selectedAstElement: Readable<AstElement | undefined> = derived(
   [page, selectedAstElementId],
   ([$page, $selectedAstElementId]) => {
     if ($page && $selectedAstElementId) {
-      return findAstElement($page.ast, $selectedAstElementId)
+      const element = findAstElement($page.ast, $selectedAstElementId)
+      get(live).pushEvent("select_element", { path: $selectedAstElementId })
+      return element
+    } else {
+      get(live).pushEvent("select_element", { path: null })
     }
   },
 )

lib/beacon/live_admin/application.ex

@@ -8,7 +8,8 @@ defmodule Beacon.LiveAdmin.Application do
     children = [
       Beacon.LiveAdmin.Registry,
       {Phoenix.PubSub, name: Beacon.LiveAdmin.PubSub},
-      Beacon.LiveAdmin.Cluster
+      Beacon.LiveAdmin.Cluster,
+      Turboprop.Cache
     ]
 
     Supervisor.start_link(children, strategy: :one_for_one, name: Beacon.LiveAdmin.Supervisor)

lib/beacon/live_admin/components/station_ui/html/form.ex

@@ -71,10 +71,12 @@ defmodule Beacon.LiveAdmin.StationUI.HTML.Form do
     """
   end
 
+  # FIXME: install StationUI to make use of StationUI.Gettext
   @doc """
   Translates an error message using gettext.
   """
-  def translate_error({msg, opts}) do
+  def translate_error({msg, _opts}) do
+    msg
     # When using gettext, we typically pass the strings we want
     # to translate as a static argument:
     #
@@ -85,11 +87,11 @@ defmodule Beacon.LiveAdmin.StationUI.HTML.Form do
     # dynamically, so we need to translate them by calling Gettext
     # with our gettext backend as first argument. Translations are
     # available in the errors.po file (as we use the "errors" domain).
-    if count = opts[:count] do
-      Gettext.dngettext(StationUI.Gettext, "errors", msg, msg, count, opts)
-    else
-      Gettext.dgettext(StationUI.Gettext, "errors", msg, opts)
-    end
+    # if count = opts[:count] do
+    #   Gettext.dngettext(StationUI.Gettext, "errors", msg, msg, count, opts)
+    # else
+    #   Gettext.dgettext(StationUI.Gettext, "errors", msg, opts)
+    # end
   end
 
   @doc """

lib/beacon/live_admin/components/visual_editor/class_control.ex

@@ -0,0 +1,73 @@
+defmodule Beacon.LiveAdmin.VisualEditor.ClassControl do
+  @moduledoc false
+
+  use Beacon.LiveAdmin.Web, :live_component
+  import Beacon.LiveAdmin.VisualEditor.Components
+  alias Beacon.LiveAdmin.VisualEditor
+
+  def render(assigns) do
+    ~H"""
+    <div id={@id}>
+      <.control_section label="Classes">
+        <input type="text" class="w-full py-1 px-2 bg-gray-100 border-gray-100 rounded-md leading-6 text-sm" id={"#{@id}-input"} phx-hook="VisualEditorClassInput" data-target={@id} />
+        <div class="pt-3">
+          <div :for={css_class <- @classes} class="inline-flex items-center rounded-full bg-slate-700 text-white text-xs px-3 pr-0 m-1 leading-4">
+            <%= css_class %>
+            <button
+              class="p-2 rounded-full inline-block bg-slate-700 text-white hover:text-blue-400 active:text-blue-500"
+              type="button"
+              phx-click="delete_class"
+              phx-value-class={css_class}
+              phx-target={@myself}
+            >
+              <span class="sr-only">Delete class:</span>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3">
+                <path
+                  fill-rule="evenodd"
+                  d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </.control_section>
+    </div>
+    """
+  end
+
+  def mount(socket) do
+    {:ok, socket}
+  end
+
+  def update(assigns, socket) do
+    %{element: element} = assigns
+
+    classes =
+      element
+      |> VisualEditor.element_class()
+      |> String.split(" ", trim: true)
+
+    {:ok,
+     socket
+     |> assign(assigns)
+     |> assign(classes: classes)}
+  end
+
+  def handle_event("add_class", %{"value" => new_class}, socket) do
+    class = VisualEditor.merge_class(socket.assigns.element, new_class)
+    send(self(), {:element_changed, {socket.assigns.element["path"], %{updated: %{"attrs" => %{"class" => class}}}}})
+    {:noreply, socket}
+  end
+
+  def handle_event("delete_class", %{"class" => deleted_class}, socket) do
+    class =
+      socket.assigns.classes
+      |> Enum.reject(&(&1 == deleted_class))
+      |> Enum.join(" ")
+
+    send(self(), {:element_changed, {socket.assigns.element["path"], %{updated: %{"attrs" => %{"class" => class}}}}})
+
+    {:noreply, socket}
+  end
+end

lib/beacon/live_admin/components/visual_editor/hooks.js

@@ -0,0 +1,15 @@
+export default {
+  VisualEditorClassInput: {
+    mounted() {
+      this.el.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault()
+          const target = "#" + this.el.dataset.target
+          this.pushEventTo(target, "add_class", { value: this.el.value }, () => {
+            this.el.value = "" // Clear the input value
+          })
+        }
+      })
+    },
+  },
+}