alchemy_cms 8.0.6 → 8.1.0

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/_custom-properties.scss

@@ -108,6 +108,7 @@
   /* Elements */
   --elements-window-width: 0px;
   --elements-window-min-width: 400px;
+  --elements-window-transition-easing: ease-in-out;
 
   /* Form */
   --form-left-column-width: 35%;

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

@@ -1,9 +1,17 @@
 @use "../mixins";
 
+@property --custom-elements-loaded {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
 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 {
@@ -15,6 +23,7 @@ html {
 *,
 *::before,
 *::after {
+  scrollbar-width: inherit;
   box-sizing: inherit;
 }
 
@@ -46,6 +55,7 @@ body {
   cursor: default;
   opacity: 1;
   transition: opacity var(--transition-duration);
+  animation: custom-elements-loaded 0 linear 250ms forwards;
 
   // Fix for strange element window offset
   &.pages.edit {
@@ -56,9 +66,8 @@ body {
     overflow: hidden;
   }
 
-  &:has(:not(:defined)) {
+  &:has(alchemy-spinner:not(:defined)) {
     opacity: var(--custom-elements-loaded, 0);
-    animation: custom-elements-loaded 0 linear 250ms forwards;
   }
 }
 
@@ -85,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/dialogs.scss

@@ -192,11 +192,17 @@
   }
 
   .buttons {
-    text-align: right;
-
-    label {
-      float: left;
-      margin-top: var(--spacing-3);
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: auto;
+    gap: var(--spacing-3);
+    align-items: center;
+    margin-top: 2em;
+    margin-bottom: 0;
+
+    > .button {
+      width: 100%;
+      white-space: nowrap;
     }
   }
 }

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);
+  }
+}

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

@@ -5,10 +5,9 @@
 
 #alchemy_elements_window {
   --width: var(--elements-window-width, 100vw);
-  position: absolute;
+  position: fixed;
   right: 0;
   top: var(--top-menu-height);
-  z-index: 20;
   display: block;
   width: var(--width);
   min-width: var(--elements-window-min-width);
@@ -21,7 +20,8 @@
     --elements-window-background-color,
     var(--dialog-background-color)
   );
-  transition: var(--transition-duration) ease-in-out;
+  transition: var(--transition-duration)
+    var(--elements-window-transition-easing);
   transform: translate3d(100%, 0, 0);
 
   .elements-window-visible & {
@@ -73,16 +73,37 @@ alchemy-elements-window-handle {
   padding: var(--spacing-2);
 
   .right {
-    display: inline-block;
+    display: inline-flex;
+    gap: var(--spacing-2);
     margin-left: auto;
   }
-}
 
-#element_area {
-  .sortable-elements {
-    min-height: 100%;
+  alchemy-list-filter {
+    width: 58px;
+    transition: var(--transition-duration);
+
+    &:focus-within,
+    &:has(input:not(:placeholder-shown)) {
+      width: 180px;
+
+      input {
+        background-color: var(--form-field-background-color);
+      }
+    }
+
+    input {
+      height: 100%;
+      background-color: var(--toolbar-bg-color);
+    }
   }
+}
 
+alchemy-sortable-elements {
+  display: block;
+  min-height: 100%;
+}
+
+#element_area {
   textarea {
     width: 100%;
   }
@@ -97,6 +118,7 @@ alchemy-elements-window {
   --scrollable-elements-offset: calc(
     var(--top-menu-height) + var(--toolbar-height)
   );
+  display: block;
 }
 
 #main-content-elements {
@@ -147,7 +169,10 @@ alchemy-elements-window {
   flex-shrink: 0;
   width: var(--spacing-4);
   height: var(--spacing-4);
-  cursor: move;
+
+  &.draggable {
+    cursor: move;
+  }
 }
 
 button.element-toggle {
@@ -186,14 +211,10 @@ button.element-toggle {
     --element-editor-background-color,
     --dialog-background-color
   );
-  margin: var(--spacing-2) 0;
+  margin-bottom: var(--spacing-2);
   transition: box-shadow var(--transition-duration);
   scroll-margin: var(--spacing-2);
 
-  &:first-child {
-    margin-top: 0;
-  }
-
   &.element-hidden {
     border-style: dashed;
 
@@ -483,35 +504,35 @@ button.element-toggle {
     border-bottom-right-radius: 0;
   }
 
-  .icon {
+  .element-icon {
     fill: currentColor;
     transition: fill var(--transition-duration);
   }
 
   > .element-handle {
-    alchemy-icon,
-    .icon {
+    .handle-icon,
+    .element-icon {
       position: absolute;
       width: var(--spacing-4);
       height: var(--spacing-4);
       transition: opacity var(--transition-duration);
     }
 
-    alchemy-icon {
+    .handle-icon {
       opacity: 0;
     }
 
-    .icon {
+    .element-icon {
       opacity: 1;
     }
   }
 
   &:hover {
-    > .element-handle alchemy-icon {
+    > .element-handle .handle-icon {
       opacity: 1;
     }
 
-    > .element-handle .icon.element {
+    > .element-handle .element-icon {
       opacity: 0;
     }
   }
@@ -602,6 +623,68 @@ alchemy-publish-element-button {
   min-height: 100px;
 }
 
+alchemy-color-select {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  > input[type="text"],
+  > .select2-container {
+    width: 100%;
+  }
+
+  > input[type="color"] {
+    border-width: var(--form-field-border-width);
+    border-style: var(--form-field-border-style);
+    border-color: var(--form-field-border-color);
+    border-radius: var(--border-radius_medium);
+    height: var(--form-field-height);
+    background: var(--form-field-background-color);
+    padding: var(--spacing-1);
+    width: 100%;
+
+    &[disabled] {
+      display: none;
+    }
+  }
+
+  &:has(input[type="color"]:not([disabled])) {
+    input[type="text"],
+    .select2-container,
+    .select2-choice {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  input[type="text"] + input[type="color"],
+  select + input[type="color"] {
+    width: calc(2 * var(--form-field-addon-width));
+    flex-shrink: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left-width: 0;
+  }
+}
+
+// place the select color options outside, because Select2
+// is opening the selection container outside the `alchemy-color-select`
+// component
+.select-color-option {
+  .color-indicator {
+    background: var(--color) 100% 100% no-repeat;
+    border: var(--border-default);
+    border-radius: var(--border-radius_medium);
+    display: inline-block;
+    height: var(--icon-size-md);
+    width: var(--icon-size-md);
+  }
+
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
 .ingredient_link_buttons {
   display: flex;
   position: absolute;
@@ -621,8 +704,8 @@ alchemy-publish-element-button {
       width: var(--form-field-addon-width);
       height: var(--form-field-height);
 
-      &:hover {
-        border-color: #c0c0c0;
+      &:hover:not([disabled]):not(.disabled) {
+        border-color: var(--button-hover-border-color);
       }
 
       &:focus {
@@ -686,6 +769,14 @@ alchemy-publish-element-button {
   }
 }
 
+.ingredient-editor.boolean {
+  label {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-0);
+  }
+}
+
 .ingredient-editor.picture {
   position: relative;
   width: 50%;
@@ -763,6 +854,12 @@ alchemy-publish-element-button {
   }
 }
 
+.ingredient-editor.richtext {
+  alchemy-tinymce {
+    margin: var(--spacing-2) 0;
+  }
+}
+
 .ingredient-editor.headline {
   &.with-level-select {
     input[type="text"] {
@@ -1034,14 +1131,19 @@ select.long {
     text-indent: 1px;
     color: var(--form-field-label-color);
 
+    > sl-tooltip {
+      display: inline-flex;
+      margin-left: var(--spacing-1);
+    }
+
     span.warning.icon {
       position: relative;
       top: 2px;
     }
 
     &.inline {
-      display: inline-block;
-      vertical-align: middle;
+      display: inline-flex;
+      align-items: center;
       min-width: 90px;
       margin-right: var(--spacing-1);
     }

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

@@ -8,7 +8,7 @@
   border-radius: var(--border-radius_medium);
 
   h2 {
-    font-size: 1.2em;
+    font-size: var(--font-size_medium);
   }
 
   ul {