katalyst-content 2.8.1 → 3.0.0.alpha.1

data/app/assets/images/katalyst/content/icons/content.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3H1m14 5H1m9.411 5H1"/></svg>

data/app/assets/images/katalyst/content/icons/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m10.1 3.1 2.8 2.8m1.522-1.531a1.973 1.973 0 0 0-2.79-2.791l-9.343 9.344a1.4 1.4 0 0 0-.35.581l-.924 3.047a.35.35 0 0 0 .436.435l3.047-.924a1.4 1.4 0 0 0 .58-.348z"/></svg>

data/app/assets/images/katalyst/content/icons/expand.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 16" fill="none">
+  <path d="M11 10L6 15L1 10M1 6L6 1L11 6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/katalyst/content/icons/figure.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 10.333-2.4-2.4a1.556 1.556 0 0 0-2.2 0L3.333 15M2.556 1h10.888C14.304 1 15 1.696 15 2.556v10.888c0 .86-.696 1.556-1.556 1.556H2.556C1.696 15 1 14.304 1 13.444V2.556C1 1.696 1.696 1 2.556 1m4.666 4.667a1.556 1.556 0 1 1-3.11 0 1.556 1.556 0 0 1 3.11 0"/></svg>

data/app/assets/images/katalyst/content/icons/group.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 4.111V2.556C1 1.7 1.7 1 2.556 1H4.11m7.778 0h1.555C14.3 1 15 1.7 15 2.556V4.11m0 7.778v1.555C15 14.3 14.3 15 13.444 15H11.89m-7.78 0H2.556A1.56 1.56 0 0 1 1 13.444V11.89m3.889-7.78h3.889c.43 0 .778.348.778.778v2.333c0 .43-.349.778-.778.778h-3.89a.78.78 0 0 1-.777-.778V4.89c0-.43.348-.778.778-.778M7.222 8h3.89c.429 0 .777.348.777.778v2.333c0 .43-.348.778-.778.778H7.222a.78.78 0 0 1-.778-.778V8.778c0-.43.349-.778.778-.778"/></svg>

data/app/assets/images/katalyst/content/icons/hidden.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7.113 3.153a7.52 7.52 0 0 1 7.843 4.603.7.7 0 0 1 0 .487 7.5 7.5 0 0 1-1.01 1.743M9.458 9.51a2.1 2.1 0 0 1-2.97-2.97m5.346 5.308A7.525 7.525 0 0 1 1.044 8.244a.7.7 0 0 1 0-.488 7.53 7.53 0 0 1 3.112-3.6M1 1l14 14"/></svg>

data/app/assets/images/katalyst/content/icons/indent.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+  <path d="M15 1V15M6 2L12 8L6 14M10 8H1" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/katalyst/content/icons/outdent.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
+  <path d="M1 1V15M10 2L4 8L10 14M6 8H15" stroke="black" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round"/>
+</svg>

data/app/assets/images/katalyst/content/icons/remove.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 4h12m-1.333 0v9.333c0 .667-.667 1.334-1.334 1.334H3.667c-.667 0-1.334-.667-1.334-1.334V4m2 0V2.667C4.333 2 5 1.333 5.667 1.333h2.666C9 1.333 9.667 2 9.667 2.667V4"/></svg>

data/app/assets/images/katalyst/content/icons/section.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 13.25V2.75c0-.464.198-.91.55-1.237A1.95 1.95 0 0 1 3.874 1h9.375c.199 0 .39.074.53.205s.22.31.22.495v12.6a.68.68 0 0 1-.22.495.78.78 0 0 1-.53.205H3.875c-.497 0-.974-.184-1.326-.513A1.7 1.7 0 0 1 2 13.25m0 0c0-.464.198-.91.55-1.237a1.95 1.95 0 0 1 1.325-.513H14M5 7.3h6M5 4.5h4.5"/></svg>

data/app/assets/images/katalyst/content/icons/table.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 1v14M1 8h14M3 1h10c1 0 2 1 2 2v10c0 1-1 2-2 2H3c-1 0-2-1-2-2V3c0-1 1-2 2-2"/></svg>

data/app/assets/images/katalyst/content/icons/theme.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.111 15a3.11 3.11 0 0 0 3.111-3.111V2.556A1.556 1.556 0 0 0 5.667 1H2.556A1.556 1.556 0 0 0 1 2.556v9.333A3.11 3.11 0 0 0 4.111 15m0 0h9.333A1.556 1.556 0 0 0 15 13.444v-3.11a1.556 1.556 0 0 0-1.556-1.556h-1.788m-7.545 3.11h.008m3.103-7L9.012 3.1a1.867 1.867 0 0 1 2.647.003l1.474 1.475a1.867 1.867 0 0 1 .02 2.67l-6.786 6.819"/></svg>

data/app/assets/stylesheets/katalyst/_content.scss

@@ -0,0 +1,4 @@
+@use "content/editor";
+@use "content/icons";
+@use "content/status-bar";
+@use "content/table";

data/app/assets/stylesheets/katalyst/content/editor.css

@@ -0,0 +1,196 @@
+.content--editor {
+  --row-inset: 2rem;
+  --row-hover-bg: var(--color-tint, #fff0eb);
+  --row-padding: 0 var(--space-2xs, 0.25rem);
+
+  position: relative;
+}
+
+/* Rows */
+
+.content--editor--item {
+  /* https://github.com/react-dnd/react-dnd/issues/832 */
+  transform: translate3d(0, 0, 0);
+
+  &:hover {
+    background: var(--row-hover-bg);
+  }
+
+  &[draggable] {
+    cursor: grab;
+  }
+
+  /* Dragged visuals */
+
+  &[data-dragging] {
+    box-shadow: inset 0 0 0 2px var(--color-tint, #fff0eb);
+
+    > * {
+      visibility: hidden;
+    }
+  }
+
+  /* Hidden items */
+
+  [data-invisible] {
+    color: var(--color-mid, #aaa);
+  }
+
+  /* row item controller */
+
+  > [data-controller] {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: baseline;
+    padding: var(--row-padding);
+  }
+
+  /* row content */
+
+  .tree {
+    display: flex;
+    gap: var(--space-xs, 0.5rem);
+    align-items: baseline;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .actions-group {
+    display: flex;
+    gap: var(--space-3xs, 0.25em);
+    align-items: baseline;
+  }
+
+  /* Theme identifier */
+
+  .item-background {
+    display: inline-flex;
+    background-color: var(--theme-background-color);
+    color: var(--theme-text-color);
+    aspect-ratio: 1;
+    padding: var(--space-3xs);
+    border-radius: var(--radius-s);
+  }
+
+  .item-background.light {
+    --theme-text-color: black;
+    --theme-background-color: white;
+  }
+
+  .item-background.dark {
+    --theme-text-color: white;
+    --theme-background-color: black;
+  }
+
+  /* Depth */
+
+  &[data-content-depth="1"] .tree {
+    padding-left: calc(var(--row-inset) * 1);
+  }
+
+  &[data-content-depth="2"] .tree {
+    padding-left: calc(var(--row-inset) * 2);
+  }
+
+  &[data-content-depth="3"] .tree {
+    padding-left: calc(var(--row-inset) * 3);
+  }
+
+  &[data-content-depth="4"] .tree {
+    padding-left: calc(var(--row-inset) * 4);
+  }
+
+  &[data-content-depth="5"] .tree {
+    padding-left: calc(var(--row-inset) * 5);
+  }
+
+  &[data-content-depth="6"] .tree {
+    padding-left: calc(var(--row-inset) * 6);
+  }
+
+  /* Lower opacity for buttons you can't use */
+
+  &[data-deny-de-nest] .button:has([data-icon="outdent"]),
+  &[data-deny-nest] .button:has([data-icon="indent"]),
+  &[data-deny-remove] .button:has([data-icon="remove"]),
+  &[data-deny-drag] .button:has([data-icon="drag"]),
+  &[data-deny-edit] .button:has([data-icon="edit"]) {
+    opacity: 0.2;
+    pointer-events: none;
+  }
+
+  &:not(:hover) .actions-group .button {
+    opacity: 0;
+  }
+
+  /* Only show 1 of the collapse / expand button */
+
+  &[data-deny-collapse] .button:has([data-icon="collapse"]),
+  &[data-deny-expand] .button:has([data-icon="expand"]) {
+    display: none !important;
+    pointer-events: none;
+  }
+
+  /* Always show the expand button when there are hidden children */
+
+  &:has([data-content-children]) .button:has([data-icon="expand"]) {
+    opacity: 1 !important;
+  }
+}
+
+/* Inline add link */
+
+.content--editor--inline-add {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 0;
+  z-index: 1;
+  outline: 1px solid var(--color-dark-glare, #555);
+
+  button {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin: 0;
+    padding: 0.25rem;
+
+    animation: content--editor--pulse 200ms ease;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  button:active {
+    transform: translate(-50%, -50%) scale(99%);
+  }
+
+  &[hidden] button {
+    transform: translate(-50%, -50%) scale(0);
+  }
+}
+
+@keyframes content--editor--pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+  }
+
+  80% {
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+/* New items picker */
+
+.content--editor--new-items {
+  .items-list {
+    display: flex;
+    gap: var(--space-2xs, 0.25rem);
+    flex-wrap: wrap;
+  }
+}

data/app/assets/stylesheets/katalyst/content/icons.css

@@ -0,0 +1,79 @@
+.content--editor {
+  [data-icon="outdent"] {
+    -webkit-mask: url("/katalyst/content/icons/outdent.svg");
+    mask: url("/katalyst/content/icons/outdent.svg");
+  }
+
+  [data-icon="indent"] {
+    -webkit-mask: url("/katalyst/content/icons/indent.svg");
+    mask: url("/katalyst/content/icons/indent.svg");
+  }
+
+  [data-icon="collapse"] {
+    -webkit-mask: url("/katalyst/content/icons/collapse.svg");
+    mask: url("/katalyst/content/icons/collapse.svg");
+    aspect-ratio: 12/16;
+  }
+
+  [data-icon="expand"] {
+    -webkit-mask: url("/katalyst/content/icons/expand.svg") no-repeat center;
+    mask: url("/katalyst/content/icons/expand.svg") no-repeat center;
+    aspect-ratio: 12/16;
+  }
+
+  [data-icon="edit"] {
+    -webkit-mask: url("/katalyst/content/icons/edit.svg");
+    mask: url("/katalyst/content/icons/edit.svg");
+  }
+
+  [data-icon="remove"] {
+    -webkit-mask: url("/katalyst/content/icons/remove.svg");
+    mask: url("/katalyst/content/icons/remove.svg");
+    aspect-ratio: 14/16;
+  }
+
+  [data-icon="hidden"] {
+    -webkit-mask: url("/katalyst/content/icons/hidden.svg");
+    mask: url("/katalyst/content/icons/hidden.svg");
+  }
+
+  [data-icon="theme"] {
+    -webkit-mask: url("/katalyst/content/icons/theme.svg") no-repeat center;
+    mask: url("/katalyst/content/icons/theme.svg") no-repeat center;
+  }
+
+  [data-icon="content"] {
+    -webkit-mask: url("/katalyst/content/icons/content.svg");
+    mask: url("/katalyst/content/icons/content.svg");
+  }
+
+  [data-icon="figure"] {
+    -webkit-mask: url("/katalyst/content/icons/figure.svg") no-repeat center;
+    mask: url("/katalyst/content/icons/figure.svg") no-repeat center;
+  }
+
+  [data-icon="table"] {
+    -webkit-mask: url("/katalyst/content/icons/table.svg") no-repeat center;
+    mask: url("/katalyst/content/icons/table.svg") no-repeat center;
+  }
+
+  [data-icon="section"] {
+    -webkit-mask: url("/katalyst/content/icons/section.svg") no-repeat center;
+    mask: url("/katalyst/content/icons/section.svg") no-repeat center;
+  }
+
+  [data-icon="group"] {
+    -webkit-mask: url("/katalyst/content/icons/group.svg") no-repeat center;
+    mask: url("/katalyst/content/icons/group.svg") no-repeat center;
+  }
+
+  [data-icon="column"] {
+    -webkit-mask: url("/katalyst/content/icons/column.svg") no-repeat center;
+    mask: url("/katalyst/content/icons/column.svg") no-repeat center;
+  }
+
+  [data-icon="aside"] {
+    -webkit-mask: url("/katalyst/content/icons/aside.svg") no-repeat center;
+    mask: url("/katalyst/content/icons/aside.svg") no-repeat center;
+  }
+}

data/app/assets/stylesheets/katalyst/content/{editor/_status-bar.scss → status-bar.css}

@@ -1,25 +1,39 @@
 [data-controller="content--editor--status-bar"] {
+  --background: #ebf9eb;
+  --color: #4dd45c;
+  --border: #4dd45c;
+
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "status actions";
+  align-items: baseline;
+  grid-column-gap: 2rem;
+
   min-height: 3rem;
   line-height: 3rem;
-  padding: 0 1.25rem 0 1.5rem;
+  padding-inline: var(--space-m);
   background: var(--background);
   color: var(--color);
   border: 1px solid var(--border);
   margin-bottom: 1rem;
-  white-space: nowrap;
 
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "status actions";
-  align-items: baseline;
+  &[data-state="draft"],
+  &[data-state="unpublished"] {
+    --background: #fefaf3;
+    --color: #ffa800;
+    --border: #ffa800;
+  }
+
+  &[data-state="dirty"] {
+    --background: #eee;
+    --color: #aaa;
+    --border: #888;
+  }
 
   .status-text {
     display: none;
     grid-area: status;
     font-weight: bold;
-    color: var(--color);
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   &[data-state="published"] .status-text[data-published],
@@ -29,44 +43,24 @@
     display: unset;
   }
 
+  button {
+    --button-bg: var(--color);
+    --button-hover-bg: var(--color);
+  }
+
   menu {
-    display: inline;
+    display: inline-flex;
     grid-area: actions;
     margin: 0;
     padding: 0;
+    gap: var(--space-3xs, 0.25rem);
+    align-items: baseline;
   }
 
   menu > li {
     display: inline;
   }
 
-  .button {
-    color: inherit;
-    line-height: 1rem;
-    margin-left: 0.5rem;
-  }
-
-  .button--primary {
-    background: var(--color);
-    border: 1px solid var(--border);
-    color: white;
-
-    &[disabled] {
-      background: var(--color);
-      opacity: 0.8;
-    }
-  }
-
-  .button--secondary {
-    background: var(--background);
-    border: 1px solid var(--border);
-    color: var(--color);
-
-    &[disabled] {
-      background: var(--background);
-    }
-  }
-
   &[data-state="published"] {
     [value="publish"],
     [value="save"],

data/app/assets/stylesheets/katalyst/content/{editor/_table.scss → table.css}

@@ -1,5 +1,3 @@
-@use "variables" as *;
-
 [data-content--editor--table-target="content"] {
   position: relative;
   min-height: 8rem;
@@ -26,17 +24,17 @@
 
   th,
   td {
-    border: 1px solid $grey;
+    border: 1px solid var(--color-mid, #9ca3af);
     padding: 0.25rem 0.5rem;
     text-align: left;
     vertical-align: top;
   }
 
   thead {
-    background-color: $grey;
+    background-color: var(--color-mid, #9ca3af);
   }
 
   tbody th {
-    background-color: $grey-light;
+    background-color: var(--color-tint, #f0ecf3);
   }
 }

data/app/assets/stylesheets/katalyst/content.css

@@ -0,0 +1,4 @@
+@import url("content/editor.css");
+@import url("content/icons.css");
+@import url("content/status-bar.css");
+@import url("content/table.css");

data/app/components/katalyst/content/editor/base_component.rb

@@ -6,12 +6,6 @@ module Katalyst
       class BaseComponent < ViewComponent::Base
         include Katalyst::HtmlAttributes
 
-        CONTAINER_CONTROLLER  = "content--editor--container"
-        LIST_CONTROLLER       = "content--editor--list"
-        ITEM_CONTROLLER       = "content--editor--item"
-        STATUS_BAR_CONTROLLER = "content--editor--status-bar"
-        NEW_ITEMS_CONTROLLER  = "content--editor--new-items"
-
         attr_accessor :container, :item
 
         delegate :config, to: ::Katalyst::Content

data/app/components/katalyst/content/editor/item_component.html.erb

@@ -1,22 +1,38 @@
 <%= tag.div(**html_attributes) do %>
-  <div class="tree" data-invisible="<%= !item.visible? %>">
-    <div role="toolbar" data-tree-accordion-controls>
-      <span role="button" value="collapse" data-action="click-><%= CONTAINER_CONTROLLER %>#collapse" title="Collapse tree"></span>
-      <span role="button" value="expand" data-action="click-><%= CONTAINER_CONTROLLER %>#expand" title="Expand tree"></span>
-    </div>
+  <div class="tree">
+    <icon class="icon" data-icon="<%= item.model_name.param_key %>" aria-hidden="true">&nbsp;</icon>
 
-    <span role="img" value="<%= item.model_name.param_key %>" title="Type"></span>
-    <h4 class="heading" title="<%= item.heading %>"><%= item.heading %></h4>
-    <span role="img" value="invisible" title="Hidden"></span>
-  </div>
+    <strong class="heading" title="<%= item.heading %>"><%= item.heading %></strong>
+
+    <span class="item-background <%= item.background %>">
+      <icon class="icon" data-icon="theme" role="img">&nbsp;</icon>
+    </span>
 
-  <div class="item-background <%= item.background %>"></div>
+    <% unless item.visible? %>
+      <icon class="icon" data-icon="hidden" title="Hidden" role="img">&nbsp;</icon>
+    <% end %>
+  </div>
 
-  <div role="toolbar" data-tree-controls>
-    <span role="button" value="de-nest" data-action="click-><%= CONTAINER_CONTROLLER %>#deNest" title="Outdent"></span>
-    <span role="button" value="nest" data-action="click-><%= CONTAINER_CONTROLLER %>#nest" title="Indent"></span>
-    <%= kpop_link_to("", edit_item_link, role: "button", title: "Edit", value: "edit") %>
-    <span role="button" value="remove" data-action="click-><%= CONTAINER_CONTROLLER %>#remove" title="Remove"></span>
+  <div role="toolbar" class="actions-group">
+    <button class="button" data-button-padding="tight" data-text-button data-action="content--editor--container#collapse" title="Collapse tree">
+      <icon class="icon" data-icon="collapse" role="img">&nbsp;</icon>
+    </button>
+    <button class="button" data-button-padding="tight" data-text-button data-action="content--editor--container#expand" title="Expand tree">
+      <icon class="icon" data-icon="expand" role="img">&nbsp;</icon>
+    </button>
+    <button class="button" data-button-padding="tight" data-text-button data-action="content--editor--container#deNest" title="Outdent">
+      <icon class="icon" data-icon="outdent" role="img">&nbsp;</icon>
+    </button>
+    <button class="button" data-button-padding="tight" data-text-button data-action="content--editor--container#nest" title="Indent">
+      <icon class="icon" data-icon="indent" role="img">&nbsp;</icon>
+    </button>
+    <%= link_to(edit_item_link, class: "button", title: "Edit", value: "edit",
+                data: { text_button: "", button_padding: "tight", turbo_frame: "content--editor--item-editor" }) do %>
+      <icon class="icon" data-icon="edit" role="img">&nbsp;</icon>
+    <% end %>
+    <button class="button" data-button-padding="tight" data-text-button data-action="content--editor--container#remove" title="Remove">
+      <icon class="icon" data-icon="remove" role="img">&nbsp;</icon>
+    </button>
   </div>
 
   <input autocomplete="off" type="hidden" name="<%= attributes_scope %>[id]" value="<%= item.id %>">

data/app/components/katalyst/content/editor/item_component.rb

@@ -4,8 +4,6 @@ module Katalyst
   module Content
     module Editor
       class ItemComponent < BaseComponent
-        include KpopHelper
-
         def edit_item_link
           if item.persisted?
             helpers.katalyst_content.edit_item_path(item)
@@ -20,7 +18,7 @@ module Katalyst
           {
             id:   dom_id(item),
             data: {
-              controller: ITEM_CONTROLLER,
+              controller: "content--editor--item",
             },
           }
         end

data/app/components/katalyst/content/editor/item_editor_component.rb

@@ -6,25 +6,18 @@ module Katalyst
       class ItemEditorComponent < BaseComponent
         include ::Turbo::FramesHelper
 
-        module Helpers
-          def prefix_partial_path_with_controller_namespace
-            false
-          end
-
-          def content_routes
-            katalyst_content
-          end
-        end
+        alias_method :model, :item
 
         def call
-          tag.div(**html_attributes) do
-            helpers.extend(Helpers)
-            helpers.render(item, path:)
-          end
+          render("form", model:, scope:, url:, id:)
         end
 
         def id
-          "item-editor-#{item.id}"
+          dom_id(item, :form)
+        end
+
+        def scope
+          :item
         end
 
         def title
@@ -35,20 +28,13 @@ module Katalyst
           end
         end
 
-        def path
+        def url
           if item.persisted?
             view_context.katalyst_content.item_path(item)
           else
             view_context.katalyst_content.items_path
           end
         end
-
-        def default_html_attributes
-          {
-            id:,
-            class: "content--item-editor",
-          }
-        end
       end
     end
   end

data/app/components/katalyst/content/editor/new_item_component.html.erb

@@ -1,12 +1,15 @@
-<%= tag.button(**html_attributes) do %>
-  <%= label %>
-  <%#
+<li>
+  <%= tag.button(**html_attributes) do %>
+    <icon class="icon" data-icon="<%= icon_name %>" role="img">&nbsp;</icon>
+    <%= label %>
+    <%#
     # Template is stored inside the new item dom, and copied into the dom when
     # the user selects the item.
-  %>
-  <template>
-    <%= render row_component do %>
-      <%= render item_component %>
-    <% end %>
-  </template>
-<% end %>
+    %>
+    <template>
+      <%= render row_component do %>
+        <%= render item_component %>
+      <% end %>
+    </template>
+  <% end %>
+</li>

data/app/components/katalyst/content/editor/new_item_component.rb

@@ -8,10 +8,6 @@ module Katalyst
 
         with_collection_parameter :item
 
-        ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
-          #{NEW_ITEMS_CONTROLLER}#add
-        ACTIONS
-
         def initialize(item:, container: item.container)
           super
         end
@@ -32,14 +28,17 @@ module Katalyst
           item.model_name.param_key
         end
 
+        alias icon_name item_type
+
         private
 
         def default_html_attributes
           {
-            role: "listitem",
-            data: {
-              item_type:,
-              action:    ACTIONS,
+            class: "button",
+            role:  "listitem",
+            data:  {
+              ghost_button: "",
+              action:       "content--editor--new-items#add",
             },
           }
         end