Add content definitions module

app/components/alchemy/admin/element_select.rb

@@ -30,7 +30,8 @@ def elements_options
 
         elements.sort_by(&:name).map do |element|
           {
-            text: Element.display_name_for(element.name),
+            name: Element.display_name_for(element.name),
+            hint: element.hint,
             icon: element.icon_file,
             id: element.name
           }

app/components/alchemy/admin/list_filter.rb

@@ -21,9 +21,9 @@ module Admin
     class ListFilter < ViewComponent::Base
       erb_template <<~ERB
         <alchemy-list-filter items-selector="<%= items_selector %>" name-attribute="<%= name_attribute %>">
-          <input type="text" class="js_filter_field" />
+          <input type="search" class="js_filter_field" />
           <alchemy-icon name="search"></alchemy-icon>
-          <button type="button" class="js_filter_field_clear icon_button">
+          <button type="reset" class="js_filter_field_clear icon_button">
             <alchemy-icon name="close" size="1x"></alchemy-icon>
           </button>
         </alchemy-list-filter>

app/controllers/alchemy/admin/page_definitions_controller.rb

@@ -0,0 +1,15 @@
+module Alchemy
+  module Admin
+    class PageDefinitionsController < ResourcesController
+      def index
+        @page_definitions = PageDefinition.all
+      end
+
+      private
+
+      def resource_handler
+        @_resource_handler ||= ::Alchemy::Resource.new(controller_path, alchemy_module, PageDefinition)
+      end
+    end
+  end
+end

app/javascript/alchemy_admin/components/element_select.js

@@ -1,7 +1,21 @@
 import { hightlightTerm } from "alchemy_admin/components/remote_select"
 
-const formatItem = (icon, text) => {
-  return `<div class="element-select-item">${icon} ${text}</div>`
+const formatSelection = (option) => {
+  return `
+    <div class="element-select-name">${option.icon} ${option.name}</div>
+  `
+}
+
+const formatItem = (icon, name, hint) => {
+  const description = hint
+    ? `<div class="element-select-description">${hint}</div>`
+    : ""
+  return `
+    <div class="element-select-item">
+      ${formatSelection({ icon, name })}
+      ${description}
+    </div>
+  `
 }
 
 class ElementSelect extends HTMLElement {
@@ -20,18 +34,16 @@ class ElementSelect extends HTMLElement {
       formatResult: (option, _el, search) => {
         let text
 
-        if (option.id === "") return option.text
+        if (option.id === "") return option.name
         if (search.term !== "") {
-          text = hightlightTerm(option.text, search.term)
+          text = hightlightTerm(option.name, search.term)
         } else {
-          text = option.text
+          text = option.name
         }
 
-        return formatItem(option.icon, text)
-      },
-      formatSelection: (option) => {
-        return formatItem(option.icon, option.text)
+        return formatItem(option.icon, text, option.hint)
       },
+      formatSelection,
       placeholder: this.placeholder
     }
     $(this.inputField).select2(options)

app/javascript/alchemy_admin/components/list_filter.js

@@ -49,11 +49,11 @@ class ListFilter extends HTMLElement {
   }
 
   get clearButton() {
-    return this.querySelector('button[type="button"]')
+    return this.querySelector('button[type="reset"]')
   }
 
   get filterField() {
-    return this.querySelector('input[type="text"]')
+    return this.querySelector('input[type="search"]')
   }
 
   get items() {

app/models/alchemy/element_definition.rb

@@ -35,6 +35,8 @@ class ElementDefinition
 
     delegate :blank?, to: :name
 
+    DEFAULT_ICON_NAME = "layout-bottom-2-line"
+
     class << self
       # Returns the definitions from elements.yml file.
       #
@@ -168,8 +170,7 @@ def icon_name
       case icon
       when TrueClass then name
       when String then icon
-      else
-        "default"
+      else determine_default_icon_name
       end
     end
 
@@ -186,5 +187,9 @@ def icons_root_path
     def hint_translation_scope
       :element_hints
     end
+
+    def determine_default_icon_name
+      Alchemy.config.element_icon_finder.call(name) || DEFAULT_ICON_NAME
+    end
   end
 end