alchemy_cms 8.0.12 → 8.1.0

data/app/serializers/alchemy/page_tree_serializer.rb

@@ -7,43 +7,23 @@ module Alchemy
     end
 
     def pages
-      tree = []
-      path = [{id: object.parent_id, children: tree}]
-      page_list = object.self_and_descendants.includes(:public_version, {language: :site})
       base_level = object.level - 1
-      # Load folded pages in advance
-      folded_user_pages = FoldedPage.folded_for_user(opts[:user]).pluck(:page_id)
-      folded_depth = Float::INFINITY
-
-      page_list.each_with_index do |page, i|
-        has_children = page_list[i + 1] && page_list[i + 1].parent_id == page.id
-        folded = has_children && folded_user_pages.include?(page.id)
+      build_pages_tree([object], base_level)
+    end
 
-        if page.depth > folded_depth
-          next
-        else
-          folded_depth = Float::INFINITY
-        end
+    private
 
-        # If this page is folded, skip all pages that are on a higher level (further down the tree).
-        if folded && !opts[:full]
-          folded_depth = page.depth
-        end
+    def build_pages_tree(pages, level)
+      pages.map do |page|
+        # Use association target directly to avoid triggering queries
+        children = page.association(:children).loaded? ? page.association(:children).target : []
+        has_children = children.any?
+        folded = !has_children && !page.leaf?
 
-        if page.parent_id != path.last[:id]
-          if path.map { |o| o[:id] }.include?(page.parent_id) # Lower level
-            path.pop while path.last[:id] != page.parent_id
-          else # One level up
-            path << path.last[:children].last
-          end
+        page_hash(page, level, folded).tap do |hash|
+          hash[:children] = build_pages_tree(children, level + 1)
         end
-
-        level = path.count + base_level
-
-        path.last[:children] << page_hash(page, level, folded)
       end
-
-      tree
     end
 
     protected

data/app/services/alchemy/copy_page.rb

@@ -28,8 +28,14 @@ module Alchemy
       depth
       urlname
       cached_tag_list
+      title
+      meta_description
+      meta_keywords
     ]
 
+    # Metadata to copy via nested attributes (title is derived from page.name)
+    METADATA_ATTRIBUTES_TO_COPY = (Alchemy::PageVersion::METADATA_ATTRIBUTES - %w[title]).freeze
+
     attr_reader :page
 
     # @param page [Alchemy::Page]
@@ -70,6 +76,7 @@ module Alchemy
         .merge(DEFAULT_ATTRIBUTES_FOR_COPY)
         .merge(differences)
       desired_attributes["name"] = best_name_for_copy(source_attributes, desired_attributes)
+      desired_attributes["draft_version_attributes"] = draft_version_attributes_for_copy
       desired_attributes.except(*SKIPPED_ATTRIBUTES_ON_COPY)
     end
 
@@ -94,5 +101,15 @@ module Alchemy
         desired_name
       end
     end
+
+    # Builds nested attributes for draft_version metadata (except title).
+    # Title is handled by PageVersion#set_title_from_page callback based on page.name.
+    def draft_version_attributes_for_copy
+      return {} unless page.draft_version
+
+      METADATA_ATTRIBUTES_TO_COPY.each_with_object({}) do |attr, hash|
+        hash[attr] = page.draft_version.send(attr)
+      end
+    end
   end
 end

data/app/services/alchemy/duplicate_element.rb

@@ -36,7 +36,7 @@ module Alchemy
       new_element.save!
 
       nested_elements = repository.children_of(source_element)
-      nested_elements = nested_elements.visible if publishable_only
+      nested_elements = nested_elements.publishable if publishable_only
       Element.acts_as_list_no_update do
         nested_elements.each.with_index(1) do |nested_element, position|
           self.class.new(nested_element, repository: repository, publishable_only: publishable_only).call(

data/app/services/alchemy/page_tree_preloader.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Alchemy
+  # Preloads page trees with all associations and children
+  #
+  # This service efficiently loads page trees to avoid N+1 queries.
+  # It handles folded pages and preloads all necessary associations.
+  #
+  # @example Preload subtree from a specific page
+  #   preloader = Alchemy::PageTreePreloader.new(page: page, user: current_user)
+  #   page_with_descendants = preloader.call
+  #
+  class PageTreePreloader
+    # @param page [Page] Starting page for loading descendants
+    # @param user [User, nil] User for folding support
+    # @param admin_includes [Boolean] Whether to include admin-only associations like :locker
+    def initialize(page:, user: nil, admin_includes: false)
+      @page = page
+      @user = user
+      @admin_includes = admin_includes
+    end
+
+    # Preloads and returns the page tree
+    #
+    # @return [Array<Page>] Pages with preloaded children, or array with single page when using from:
+    def call
+      pages = page.self_and_descendants
+      folded_page_ids = load_folded_page_ids
+      if folded_page_ids.any?
+        pages = pages.where(
+          "parent_id IS NULL OR parent_id NOT IN (?)",
+          folded_page_ids
+        )
+      end
+      pages = pages.preload(*preload_associations)
+      pages = pages.map { PageTreePage.new(_1) }
+
+      preload_children_associations(pages, folded_page_ids:)
+
+      # Return the starting page, which now has preloaded descendants
+      # We need to return the actual instance from the pages array, not the @page instance
+      # because the children associations were set on the pages array instances
+      pages.find { |p| p.id == page.id }
+    end
+
+    private
+
+    attr_reader :page, :user, :admin_includes
+
+    # Load folded page IDs for the user
+    def load_folded_page_ids
+      if user && Alchemy.config.user_class < ActiveRecord::Base
+        FoldedPage.folded_for_user(user).pluck(:page_id).to_set
+      else
+        Set.new
+      end
+    end
+
+    # Preload children associations for a collection of pages
+    # This manually populates the children association to prevent N+1 queries
+    #
+    # @param pages [Array<Page>] The pages to preload children for
+    # @param folded_page_ids [Set] Optional set of page IDs that should have empty children
+    # @return [void]
+    def preload_children_associations(pages, folded_page_ids: Set.new)
+      # Group pages by parent_id for efficient lookup
+      pages_by_parent = pages.group_by(&:parent_id)
+
+      # Manually populate the children association for each page
+      pages.each do |page|
+        children_records = pages_by_parent[page.id] || []
+
+        # If page is folded, set children to empty array
+        collection = if folded_page_ids.include?(page.id)
+          page.folded = true
+          []
+        else
+          page.folded = false
+          children_records.sort_by(&:lft)
+        end
+        page.association(:children).target = collection
+        page.association(:children).loaded!
+      end
+    end
+
+    # Associations to preload for sitemap rendering
+    def preload_associations
+      associations = [
+        {
+          language: {
+            site: :languages
+          }
+        },
+        :public_version
+      ]
+      associations.push(:locker) if admin_includes
+      associations
+    end
+  end
+
+  class PageTreePage < SimpleDelegator
+    attr_accessor :folded
+    alias_method :folded?, :folded
+  end
+end

data/app/stylesheets/alchemy/_extends.scss

@@ -34,16 +34,15 @@
   line-height: var(--form-field-line-height);
   transition: var(--transition-duration);
 
-  &:focus:not(.readonly) {
+  &:focus:not(.readonly),
+  &:focus:not([readonly]) {
     @include mixins.default-focus-style(
       $box-shadow: 0 0 0 1px var(--focus-color)
     );
   }
 
   &[disabled],
-  &.disabled,
-  &:not(.flatpickr-input)[readonly],
-  &:not(.flatpickr-input).readonly {
+  &.disabled {
     color: var(--form-field-disabled-text-color);
     background-color: var(--form-field-disabled-bg-color);
     cursor: default;
@@ -53,11 +52,6 @@
   &.disabled {
     cursor: not-allowed;
   }
-
-  &:not(.flatpickr-input)[readonly],
-  &:not(.flatpickr-input).readonly {
-    pointer-events: none;
-  }
 }
 
 %gradiated-toolbar {

data/app/stylesheets/alchemy/_mixins.scss

@@ -16,6 +16,7 @@
 
 @mixin button-defaults(
   $background-color: var(--button-bg-color),
+  $disabled-background-color: var(--button-disabled-bg-color),
   $hover-color: var(--button-hover-bg-color),
   $hover-border-color: var(--button-hover-border-color),
   $border-radius: var(--button-border-radius),
@@ -68,8 +69,9 @@
 
   &.disabled,
   &[disabled] {
-    background-color: var(--button-disabled-bg-color);
+    background-color: $disabled-background-color;
     border-color: var(--button-disabled-border-color);
+    color: var(--text-color-muted);
     cursor: not-allowed;
     box-shadow: none;
     outline: none;

data/app/stylesheets/alchemy/_themes.scss

@@ -83,8 +83,8 @@
   --form-field-box-shadow: inset 0 0 1px var(--a-dark-grey);
   --form-field-label-color: var(--text-color-muted);
   --form-field-text-color: var(--text-color);
-  --form-field-disabled-text-color: hsl(0deg, 0%, 53%);
-  --form-field-disabled-bg-color: hsla(0deg, 0%, 20%, 0.5);
+  --form-field-disabled-text-color: var(--form-field-text-color);
+  --form-field-disabled-bg-color: transparent;
   --form-field-error-bg-color: hsl(0deg, 47%, 10%);
   --form-field-error-box-shadow: inset 0 0 1px hsla(0deg, 25%, 30%, 0.5);
 
@@ -153,6 +153,9 @@
   --picture-tool-background-color: var(--a-darker-grey);
   --picture-tool-hover-background-color: var(--a-darkest-grey);
 
+  --scrollbar-thumb-color: var(--a-dark-grey);
+  --scrollbar-track-color: var(--a-darkest-grey);
+
   --search-field-background-color: var(--a-dark-grey);
 
   /* Selects */
@@ -161,12 +164,12 @@
   --select-text-color: var(--text-color);
   --select-hover-bg-color: var(--color-blue_dark);
   --select-hover-border-color: var(--form-field-border-color);
-  --select-hover-text-color: var(--color-white);
+  --select-hover-text-color: var(--text-color);
   --select-background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="hsl(200deg, 5%, 70%)" viewBox="0 0 24 24"><path d="M11.9997 13.1714L16.9495 8.22168L18.3637 9.63589L11.9997 15.9999L5.63574 9.63589L7.04996 8.22168L11.9997 13.1714Z"></path></svg>');
   --select-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsl(200deg, 5%, 70%)"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>');
-  --select-disabled-background-color: var(--a-darker-grey);
+  --select-disabled-background-color: transparent;
   --select-disabled-border-color: var(--a-grey);
-  --select-disabled-text-color: var(--a-lighter-grey);
+  --select-disabled-text-color: var(--select-text-color);
   --select-dropdown-background-color: var(--a-darker-grey);
   --select-dropdown-box-shadow: 0 var(--spacing-2) var(--spacing-2)
     hsla(0deg, 0%, 0%, 0.75);
@@ -213,6 +216,7 @@
   /* Toolbar */
   --toolbar-bg-color: var(--a-darker-grey);
   --toolbar-border-bottom: 1px solid var(--a-darkest-grey);
+  --toolbar-spacer-color: var(--a-grey);
 
   /* Tooltips */
   --tooltip-background-color: var(--color-blue_dark);
@@ -327,7 +331,7 @@
   --dialog-header-color: var(--color-blue_dark);
   --dialog-header-text-color: var(--color-white);
   --dialog-box-shadow: 0 var(--spacing-2) var(--spacing-4)
-    hsla(0deg, 0%, 14%, 0.5);
+    hsla(0deg, 0%, 14%, 0.15);
   --dialog-overlay-color: hsla(0deg, 0%, 39%, 0.4);
   --dialog-background-color: var(--color-grey_very_light);
 
@@ -354,8 +358,8 @@
   --form-field-box-shadow: inset 0 0 1px var(--color-grey_light);
   --form-field-label-color: var(--text-color);
   --form-field-text-color: var(--text-color);
-  --form-field-disabled-text-color: hsl(0deg, 0%, 53%);
-  --form-field-disabled-bg-color: hsla(0deg, 0%, 100%, 0.5);
+  --form-field-disabled-text-color: var(--form-field-text-color);
+  --form-field-disabled-bg-color: transparent;
   --form-field-error-bg-color: hsl(0deg, 47%, 96%);
   --form-field-error-box-shadow: inset 0 0 1px hsla(0deg, 25%, 69%, 0.5);
 
@@ -422,6 +426,9 @@
   --picture-tool-background-color: var(--color-white);
   --picture-tool-hover-background-color: var(--color-grey_very_light);
 
+  --scrollbar-thumb-color: var(--color-white);
+  --scrollbar-track-color: var(--color-grey_light);
+
   --search-field-background-color: var(--color-grey_very_light);
 
   /* Selects */
@@ -433,8 +440,9 @@
   --select-hover-text-color: var(--color-white);
   --select-background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsla(224deg, 23%, 26%, 0.75)"><path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path></svg>');
   --select-close-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsla(224deg, 23%, 26%, 0.75)"><path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path></svg>');
-  --select-disabled-background-color: var(--color-grey_very_light);
+  --select-disabled-background-color: transparent;
   --select-disabled-border-color: var(--border-inset-color);
+  --select-disabled-text-color: var(--select-text-color);
   --select-dropdown-background-color: var(--color-white);
   --select-dropdown-box-shadow: 0 var(--spacing-2) var(--spacing-2)
     hsla(0deg, 0%, 0%, 0.15);
@@ -465,7 +473,7 @@
 
   /* Text */
   --text-color: hsla(224deg, 23%, 26%, 0.8);
-  --text-color-muted: hsla(224deg, 23%, 26%, 0.5);
+  --text-color-muted: hsla(224deg, 23%, 26%, 0.6);
   --text-link-color: var(--color-orange_very_dark);
   --text-shadow-light: 0 0 var(--spacing-1) hsla(0deg, 0%, 100%, 0.5);
 
@@ -483,6 +491,7 @@
   /* Toolbar */
   --toolbar-bg-color: var(--color-grey_light);
   --toolbar-border-bottom: var(--border-default);
+  --toolbar-spacer-color: var(--border-color);
 
   /* Tooltips */
   --tooltip-background-color: var(--color-blue_dark);

data/app/stylesheets/alchemy/admin/archive.scss

@@ -184,6 +184,7 @@ div.assign_image_list_image {
   z-index: 10;
   border-radius: var(--border-radius_medium);
   box-shadow: 0 0 1px var(--color-grey_dark);
+  border: 0;
 
   &:hover {
     text-decoration: none;

data/app/stylesheets/alchemy/admin/base.scss

@@ -10,6 +10,8 @@ html {
   box-sizing: border-box;
   height: 100%;
   font-size: var(--font-size_medium);
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
 
   &.turbo-progress-bar::before,
   .turbo-progress-bar {
@@ -21,6 +23,7 @@ html {
 *,
 *::before,
 *::after {
+  scrollbar-width: inherit;
   box-sizing: inherit;
 }
 
@@ -91,8 +94,8 @@ a {
   }
 }
 
-a:focus,
-[tabindex]:focus {
+a:focus:not(.disabled),
+[tabindex]:focus:not(.disabled) {
   @include mixins.default-focus-style;
 }
 

data/app/stylesheets/alchemy/admin/buttons.scss

@@ -84,21 +84,21 @@ input.button {
 
   &.disabled,
   &[disabled] {
-    pointer-events: none;
-
     svg {
       opacity: 0.3;
     }
 
     &:hover {
       text-decoration: none;
-      cursor: default;
+      cursor: not-allowed;
+      border-color: initial;
     }
   }
 
   &.linked {
     @include mixins.button-defaults(
       $background-color: var(--icon-button-linked-color),
+      $disabled-background-color: var(--icon-button-linked-color),
       $hover-color: var(--icon-button-linked-hover-color),
       $border: 1px solid var(--icon-button-linked-border-color),
       $hover-border-color: var(--icon-button-linked-hover-border-color),

data/app/stylesheets/alchemy/admin/element-select.scss

@@ -1,11 +1,29 @@
 .element-select-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.element-select-name {
   display: flex;
   align-items: center;
 
   > svg {
+    flex-shrink: 0;
     width: auto;
     height: var(--spacing-4);
     fill: currentColor;
     padding-right: var(--spacing-2);
   }
 }
+
+.element-select-description {
+  margin-top: var(--spacing-0);
+  padding-left: var(--spacing-6);
+  font-size: var(--font-size_small);
+  color: var(--text-color-muted);
+  max-width: 270px;
+
+  .select2-highlighted & {
+    color: var(--select-hover-text-color);
+  }
+}