alchemy_cms 7.1.12 → 7.2.0.b

data/app/models/alchemy/page.rb

@@ -200,17 +200,19 @@ module Alchemy
         %w[name urlname title]
       end
 
-      # Used to store the current page id previewed in the edit page template.
-      #
+      # Used to store the current page previewed in the edit page template.
+      # @deprecated Use {Alchemy::Current#preview_page=} instead.
       def current_preview=(page)
-        RequestStore.store[:alchemy_current_preview] = page&.id
+        Current.preview_page = page
       end
+      deprecate "current_preview=": :"Alchemy::Current.preview_page=", deprecator: Alchemy::Deprecation
 
-      # Returns the current page id previewed in the edit page template.
-      #
+      # Returns the current page previewed in the edit page template.
+      # @deprecated Use {Alchemy::Current#preview_page} instead.
       def current_preview
-        RequestStore.store[:alchemy_current_preview]
+        Current.preview_page
       end
+      deprecate current_preview: :"Alchemy::Current.preview_page", deprecator: Alchemy::Deprecation
 
       # @return the language root page for given language id.
       # @param language_id [Fixnum]
@@ -271,8 +273,10 @@ module Alchemy
         options = [[Alchemy.t(:default, scope: "link_target_options"), ""]]
         link_target_options = Config.get(:link_target_options)
         link_target_options.each do |option|
+          # add an underscore to the options to provide the default syntax
+          # @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
           options << [Alchemy.t(option, scope: "link_target_options",
-            default: option.to_s.humanize), option]
+            default: option.to_s.humanize), "_#{option}"]
         end
         options
       end
@@ -375,7 +379,7 @@ module Alchemy
     #
     def unlock!
       if update_columns(locked_at: nil, locked_by: nil)
-        Page.current_preview = nil
+        Current.preview_page = nil
       end
     end
 
@@ -444,25 +448,6 @@ module Alchemy
 
     delegate :public_until=, to: :public_version, allow_nil: true
 
-    # Updates an Alchemy::Page based on a new ordering to be applied to it
-    #
-    # Note: Page's urls should not be updated (and a legacy URL created) if nesting is OFF
-    # or if the URL is the same
-    #
-    # @param [TreeNode]
-    #   A tree node with new lft, rgt, depth, url, parent_id and restricted indexes to be updated
-    #
-    def update_node!(node)
-      hash = {lft: node.left, rgt: node.right, parent_id: node.parent, depth: node.depth, restricted: node.restricted}
-
-      if urlname != node.url
-        LegacyPageUrl.create(page_id: id, urlname: urlname)
-        hash[:urlname] = node.url
-      end
-
-      update_columns(hash)
-    end
-
     # Holds an instance of +FixedAttributes+
     def fixed_attributes
       @_fixed_attributes ||= FixedAttributes.new(self)
@@ -555,7 +540,7 @@ module Alchemy
     end
 
     def set_language
-      self.language = parent&.language || Language.current
+      self.language = parent&.language || Current.language
       set_language_code
     end
 

data/app/models/alchemy/picture.rb

@@ -55,6 +55,9 @@ module Alchemy
     has_many :elements, through: :picture_ingredients
     has_many :pages, through: :elements
     has_many :thumbs, class_name: "Alchemy::PictureThumb", dependent: :destroy
+    has_many :descriptions, class_name: "Alchemy::PictureDescription", dependent: :destroy
+
+    accepts_nested_attributes_for :descriptions, allow_destroy: true, reject_if: ->(attr) { attr[:text].blank? }
 
     # Raise error, if picture is in use (aka. assigned to an Picture ingredient)
     #
@@ -231,6 +234,11 @@ module Alchemy
       }
     end
 
+    # Returns the picture description for a given language.
+    def description_for(language)
+      descriptions.find_by(language: language)&.text
+    end
+
     # Returns an uri escaped name.
     #
     def urlname

data/app/models/alchemy/picture_description.rb

@@ -0,0 +1,8 @@
+module Alchemy
+  class PictureDescription < ActiveRecord::Base
+    belongs_to :picture, class_name: "Alchemy::Picture"
+    belongs_to :language, class_name: "Alchemy::Language"
+
+    validates_uniqueness_of :picture_id, scope: :language_id
+  end
+end

data/app/models/alchemy/picture_variant.rb

@@ -43,7 +43,7 @@ module Alchemy
 
       @picture = picture
       @options = options
-      @render_format = options[:format] || picture.default_render_format
+      @render_format = (options[:format] || picture.default_render_format).to_s
     end
 
     # Process a variant of picture

data/app/models/alchemy/site.rb

@@ -35,7 +35,7 @@ module Alchemy
 
     # Returns true if this site is the current site
     def current?
-      self.class.current == self
+      Current.site == self
     end
 
     # Returns the path to site's view partial.
@@ -57,23 +57,26 @@ module Alchemy
     end
 
     class << self
+      # @deprecated Use {Alchemy::Current#site=} instead.
       def current=(site)
-        RequestStore.store[:alchemy_current_site] = site
+        Current.site = site
       end
+      deprecate "current=": :"Alchemy::Current.site=", deprecator: Alchemy::Deprecation
 
+      # @deprecated Use {Alchemy::Current#site} instead.
       def current
-        RequestStore.store[:alchemy_current_site] || default
+        Current.site
       end
+      deprecate current: :"Alchemy::Current.site", deprecator: Alchemy::Deprecation
 
-      def default
-        Site.first
-      end
+      alias_method :default, :first
+      deprecate default: :first, deprecator: Alchemy::Deprecation
 
       def find_for_host(host)
         # These are split up into two separate queries in order to run the
         # fastest query first (selecting the domain by its primary host name).
         #
-        find_by(host: host) || find_in_aliases(host) || default
+        find_by(host: host) || find_in_aliases(host) || first
       end
 
       def find_in_aliases(host)

data/app/serializers/alchemy/attachment_serializer.rb

@@ -7,8 +7,16 @@ module Alchemy
       :file_name,
       :file_mime_type,
       :file_size,
+      :icon_css_class,
       :tag_list,
       :created_at,
       :updated_at
+
+    attribute :url do
+      Alchemy::Engine.routes.url_helpers.download_attachment_path(
+        id: object.id,
+        name: object.file_name
+      )
+    end
   end
 end

data/app/serializers/alchemy/page_node_serializer.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Alchemy
+  class PageNodeSerializer < ActiveModel::Serializer
+    attributes :id,
+      :url_path,
+      :parent_id
+  end
+end

data/app/views/alchemy/_menubar.html.erb

@@ -1,4 +1,4 @@
-<% if !@preview_mode && @page && can?(:edit_content, @page) %>
+<% if !Alchemy::Current.preview_page? && @page && can?(:edit_content, @page) %>
   <alchemy-menubar>
     <template>
       <%= stylesheet_link_tag("alchemy/menubar") %>

data/app/views/alchemy/_preview_mode_code.html.erb

@@ -1,4 +1,4 @@
-<% if @preview_mode %>
+<% if Alchemy::Current.preview_page? %>
   <script type="text/javascript">
     Alchemy = { locale: "<%= session[:alchemy_locale] %>" };
   </script>

data/app/views/alchemy/admin/attachments/_tag_list.html.erb

@@ -1,12 +1,12 @@
 <% if Alchemy::Attachment.tag_counts.any? %>
   <h3><%= Alchemy.t("Filter by tag") %></h3>
-  <%= js_filter_field '.tag-list li' %>
+  <%= render Alchemy::Admin::ListFilter.new(".tag-list li") %>
   <ul>
     <%= render_tag_list('Alchemy::Attachment') %>
   </ul>
   <% if search_filter_params[:tagged_with].present? %>
     <%= link_to(
-      render_icon(:times, size: 'xs') + Alchemy.t('Remove tag filter'),
+      render_icon(:times, size: '1x') + Alchemy.t('Remove tag filter'),
       url_for(search_filter_params.except(:tagged_with)),
       remote: request.xhr?,
       class: 'secondary button small with_icon'

data/app/views/alchemy/admin/attachments/archive_overlay.js.erb

@@ -1,5 +1,4 @@
 (function() {
   var dialog = Alchemy.currentDialog();
   dialog.dialog_body.html('<%= j render("archive_overlay") %>');
-  Alchemy.ListFilter(dialog.dialog_body);
 })();

data/app/views/alchemy/admin/attachments/edit.html.erb

@@ -2,9 +2,8 @@
   url: {action: :update, q: search_filter_params[:q], page: params[:page]}) do |f| -%>
   <%= f.input :name, input_html: {autofocus: true} %>
   <%= f.input :file_name, input_html: {autofocus: true}, hint: Alchemy.t(:attachment_filename_notice) %>
-  <div class="input string autocomplete_tag_list">
-    <%= f.label :tag_list %>
-    <%= render 'alchemy/admin/partials/autocomplete_tag_list', f: f %>
-  </div>
+  <%= render Alchemy::Admin::TagsAutocomplete.new do %>
+    <%= f.input :tag_list, input_html: { value: f.object.tag_list.join(",") } %>
+  <% end %>
   <%= f.submit Alchemy.t(:save) %>
 <% end %>

data/app/views/alchemy/admin/clipboard/clear.js.erb

@@ -1,3 +1,3 @@
 $("#clipboard_items").replaceWith("<%= j render_message { Alchemy.t('No items in your clipboard') } -%>");
-$('#clipboard_button .icon').removeClass('ri-clipboard-fill').addClass('ri-clipboard-line');
+$('#clipboard_button alchemy-icon').attr('icon-style', 'line');
 Alchemy.pleaseWaitOverlay(false);

data/app/views/alchemy/admin/clipboard/index.html.erb

@@ -12,7 +12,7 @@
         <%= render_icon(:file) %>
         <%= truncate(item.name, length: 50) %>
       <% else %>
-        <%= render_icon(:draggable, style: nil) %>
+        <%= render_icon(:draggable, style: false) %>
         <%= truncate(item.display_name_with_preview_text(50), length: 50) %>
       <% end %>
       <span class="float_right">

data/app/views/alchemy/admin/clipboard/insert.js.erb

@@ -13,7 +13,7 @@
 <% else -%>
   Alchemy.growl('<%= j Alchemy.t("item copied to clipboard", name: @item.class.name == "Alchemy::Element" ? @item.display_name_with_preview_text : @item.name) %>')
 <% end -%>
-$('#clipboard_button .icon').removeClass('ri-clipboard-line').addClass('ri-clipboard-fill');
+$('#clipboard_button alchemy-icon').attr('icon-style', 'fill');
 
 <%# Update add nested element forms for any elements that accept ONLY this as a nested element %>
 <% if @item.class == Alchemy::Element %>

data/app/views/alchemy/admin/clipboard/remove.js.erb

@@ -3,7 +3,7 @@
   $("#clipboard_item_<%= @item.id -%>").remove();
   Alchemy.growl('<%= Alchemy.t("item removed from clipboard", :name => @item.class.to_s == "Element" ? @item.display_name_with_preview_text : @item.name) -%>');
 <%- if @clipboard.blank? -%>
-  $('#clipboard_button .icon').removeClass('fa-paste').addClass('fa-clipboard');
+  $('#clipboard_button alchemy-icon').attr('icon-style', 'line');
   $("#clipboard_items").replaceWith("<%= j render_message { Alchemy.t('No items in your clipboard') } %>");
 <%- end -%>
 

data/app/views/alchemy/admin/dashboard/_locked_pages.html.erb

@@ -36,7 +36,7 @@
         <% end %>
       </td>
       <td>
-        <% if (current_alchemy_user.id == page.locked_by) || can?(:manage, Alchemy::Site.current) %>
+        <% if (current_alchemy_user.id == page.locked_by) || can?(:manage, Alchemy::Current.site) %>
         <%= form_tag(alchemy.unlock_admin_page_path(page, :redirect_to => alchemy.admin_dashboard_url)) do %>
           <button class="icon_button small" title="<%= Alchemy.t(:explain_unlocking) %>">
             <%= render_icon(:close, size: '1x') %>

data/app/views/alchemy/admin/dashboard/_sites.html.erb

@@ -7,7 +7,7 @@
     <tr class="<%= cycle('even', 'odd', name: 'sites') %>">
       <td>
         <% if alchemy.respond_to?(:login_url) %>
-          <%= link_to_unless site == Alchemy::Site.current,
+          <%= link_to_unless site == Alchemy::Current.site,
             site.name,
             alchemy.login_url(
               protocol: 'http://',

data/app/views/alchemy/admin/dashboard/help.html.erb

@@ -1,21 +1,57 @@
 <h2><%= Alchemy.t('Global shortcuts') %></h2>
 <ul class="shortcuts">
-  <li><kbd>?</kbd><%= Alchemy.t('Open help window', scope: 'help.shortcuts') %></li>
-  <li><kbd>esc</kbd><%= Alchemy.t('Close current dialog', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>q</kbd><%= Alchemy.t('Open logout dialog', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>f</kbd><%= Alchemy.t('Focus search field', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>n</kbd><%= Alchemy.t('Create a new record', scope: 'help.shortcuts') %></li>
+  <li>
+    <kbd>?</kbd>
+    <%= Alchemy.t('Open help window', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>esc</kbd>
+    <%= Alchemy.t('Close current dialog', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>q</kbd>
+    <%= Alchemy.t('Open logout dialog', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>f</kbd>
+    <%= Alchemy.t('Focus search field', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>n</kbd>
+    <%= Alchemy.t('Create a new record', scope: 'help.shortcuts') %>
+  </li>
 </ul>
 <h2><%= Alchemy.t('Page edit shortcuts') %></h2>
 <ul class="shortcuts">
-  <li><kbd>alt</kbd><kbd>i</kbd><%= Alchemy.t('Show page infos', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>n</kbd><%= Alchemy.t('Create new element', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>e</kbd><%= Alchemy.t('Edit page properties', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>r</kbd><%= Alchemy.t('Reload the preview', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>x</kbd><%= Alchemy.t('Leave the page', scope: 'help.shortcuts') %></li>
+  <li>
+    <kbd>alt</kbd><kbd>i</kbd>
+    <%= Alchemy.t('Show page infos', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>n</kbd>
+    <%= Alchemy.t('Create new element', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>e</kbd>
+    <%= Alchemy.t('Edit page properties', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>r</kbd>
+    <%= Alchemy.t('Reload the preview', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>x</kbd>
+    <%= Alchemy.t('Leave the page', scope: 'help.shortcuts') %>
+  </li>
 </ul>
 <h2><%= Alchemy.t('Library shortcuts') %></h2>
 <ul class="shortcuts">
-  <li><kbd>alt</kbd><kbd>n</kbd><%= Alchemy.t('Open upload form', scope: 'help.shortcuts') %></li>
-  <li><kbd>alt</kbd><kbd>a</kbd><%= Alchemy.t('Select all pictures', scope: 'help.shortcuts') %></li>
+  <li>
+    <kbd>alt</kbd><kbd>n</kbd>
+    <%= Alchemy.t('Open upload form', scope: 'help.shortcuts') %>
+  </li>
+  <li>
+    <kbd>alt</kbd><kbd>a</kbd>
+    <%= Alchemy.t('Select all pictures', scope: 'help.shortcuts') %>
+  </li>
 </ul>

data/app/views/alchemy/admin/dashboard/index.html.erb

@@ -1,6 +1,6 @@
 <%= content_for :toolbar do %>
   <div class="toolbar_buttons">
-    <%= toolbar_button(
+    <%= render Alchemy::Admin::ToolbarButton.new(
       icon: 'information',
       label: Alchemy.t(:info),
       url: alchemy.dashboard_info_path,

data/app/views/alchemy/admin/dashboard/info.html.erb

@@ -43,22 +43,19 @@
   <p><%= Alchemy.t('Alchemy is open software and itself uses open software and free resources:') %></p>
   <ul>
     <li>
-      <a href="http://rubyonrails.org" target="_blank">RubyOnRails</a>
+      <a href="https://rubyonrails.org" target="_blank">Ruby on Rails</a>
     </li>
     <li>
-      <a href="http://jquery.com" target="_blank">jQuery Javascript Library</a>
+      <a href="https://jquery.com" target="_blank">jQuery Javascript Library</a>
     </li>
     <li>
-      <a href="http://jqueryui.com" target="_blank">jQuery UI Javascript GUI Library</a>
+      <a href="https://shoelace.style" target="_blank">Shoelace Web Components Library</a>
     </li>
     <li>
-      <a href="http://tinymce.moxiecode.com" target="_blank">TinyMCE - Javascript WYSIWYG Editor</a>
+      <a href="https://www.tiny.cloud" target="_blank">TinyMCE - Javascript WYSIWYG Editor</a>
     </li>
     <li>
-      <a href="http://blueimp.github.io/jQuery-File-Upload/" target="_blank">jQuery File Upload</a>
-    </li>
-    <li>
-      <a href="https://remixicon.com" target="_blank">Remix Icon</a>
+      <a href="https://remixicon.com" target="_blank">Remix Icons</a>
     </li>
   </ul>
 <% end %>

data/app/views/alchemy/admin/elements/_add_nested_element_form.html.erb

@@ -8,7 +8,7 @@
       <%= f.hidden_field :name %>
       <%= f.hidden_field :page_version_id, value: element.page_version_id %>
       <%= f.hidden_field :parent_element_id, value: element.id %>
-      <button class="add-nestable-element-button" is="alchemy-button">
+      <button class="add-nestable-element-button" is="alchemy-button" data-turbo="false">
         <%= Alchemy.t(:add_nested_element, name: Alchemy.t(nestable_element.to_sym, scope: 'element_names')) %>
       </button>
     <% end %>

data/app/views/alchemy/admin/elements/_element.html.erb

@@ -2,7 +2,7 @@
   id="element_<%= element.id %>"
   data-element-id="<%= element.id %>"
   data-element-name="<%= element.name %>"
-  class="<%= element.css_classes %>"
+  class="<%= element.css_classes.join(" ") %>"
   <%= element.compact? ? "compact" : nil %>
   <%= element.fixed? ? "fixed" : nil %>
 >
@@ -44,7 +44,7 @@
             <%= content_tag :details, class: "ingredient-group", id: "element_#{element.id}_ingredient_group_#{group.parameterize.underscore}", is: "alchemy-ingredient-group" do %>
               <summary>
                 <%= element.translated_group group %>
-                <i class="ingredient-group-expand icon ri-fw ri-arrow-left-s-line"></i>
+                <%= render_icon "arrow-left-s" %>
               </summary>
               <%= render ingredients, element_form: f %>
             <% end %>
@@ -53,10 +53,10 @@
       <% end %>
 
       <% if element.taggable? %>
-        <div class="autocomplete_tag_list">
+        <%= render Alchemy::Admin::TagsAutocomplete.new do %>
           <%= f.label :tag_list %>
-          <%= render 'alchemy/admin/partials/autocomplete_tag_list', f: f %>
-        </div>
+          <%= f.text_field :tag_list, value: f.object.tag_list.join(",") %>
+        <% end %>
       <% end %>
     <% end %>
 

data/app/views/alchemy/admin/elements/_footer.html.erb

@@ -5,7 +5,7 @@
     </p>
   <% end %>
 
-  <button type="submit" form="element_<%= element.id %>_form" is="alchemy-button">
+  <button type="submit" form="element_<%= element.id %>_form" is="alchemy-button" data-turbo="false">
     <%= Alchemy.t(:save) %>
   </button>
 </div>

data/app/views/alchemy/admin/elements/_header.html.erb

@@ -5,7 +5,7 @@
     <% elsif element.deprecated? %>
       <%= hint_with_tooltip element.deprecation_notice %>
     <% else %>
-      <%= render_icon('draggable', style: nil, class: 'element', fixed_width: false) %>
+      <%= render_icon('draggable', style: false, class: 'element', fixed_width: false) %>
     <% end %>
   </span>
   <span class="element-title">
@@ -24,6 +24,10 @@
     title: Alchemy.t(element.folded? ? :show_element_content : :hide_element_content),
     class: "element-toggle"
   }) do %>
-    <%= render_icon element.folded? ? 'arrow-left-s' : 'arrow-down-s' %>
+    <% if element.compact? %>
+      <%= render_icon "more-2" %>
+    <% else %>
+      <%= render_icon element.folded? ? "arrow-left-s" : "arrow-down-s" %>
+    <% end %>
   <% end %>
 </div>

data/app/views/alchemy/admin/elements/_toolbar.html.erb

@@ -19,12 +19,14 @@
     ) %>
   </sl-tooltip>
   <sl-tooltip content="<%= Alchemy.t("Delete element") %>">
-    <%= link_to_confirm_dialog(
-      render_icon('delete-bin-2'),
-      Alchemy.t(:confirm_to_delete_element),
-      alchemy.admin_element_path(element),
-      class: "icon_button"
-    ) -%>
+    <alchemy-delete-element-button
+      href="<%= alchemy.admin_element_path(element) %>"
+      message="<%= Alchemy.t(:confirm_to_delete_element) %>"
+    >
+      <button type="button" class="icon_button" data-turbo="false">
+        <%= render_icon('delete-bin-2') %>
+      </button>
+    </alchemy-delete-element-button>
   </sl-tooltip>
   <sl-tooltip content="<%= element.public? ? Alchemy.t(:hide_element) : Alchemy.t(:show_element) %>" placement="top-end">
     <alchemy-publish-element-button>

data/app/views/alchemy/admin/elements/create.js.erb

@@ -7,9 +7,6 @@
 <%- end -%>
 
 <% if @element.fixed? %>
-  if ($('#fixed-elements').length == 0) {
-    Alchemy.FixedElements.buildTabs('<%= Alchemy.t(:main_content) %>');
-  }
   Alchemy.FixedElements.createTab('<%= @element.id %>', '<%= @element.display_name %>');
   $element_area = $('[name="fixed-element-<%= @element.id %>"]');
 <% elsif @element.parent_element %>
@@ -24,8 +21,6 @@
   $element_area.append(element_html);
 <%- end -%>
 
-  Alchemy.SortableElements('[data-element-id="<%= @element.id %>"] .nested-elements');
-
   Alchemy.growl('<%= Alchemy.t(:successfully_added_element) %>');
   Alchemy.closeCurrentDialog();
   Alchemy.reloadPreview();

data/app/views/alchemy/admin/elements/index.html.erb

@@ -1,36 +1,72 @@
-<% if @fixed_elements.any? %>
-  <sl-tab-group id="fixed-elements">
-    <sl-tab slot="nav" panel="main-content-elements">
-      <%= Alchemy.t(:main_content) %>
-    </sl-tab>
-    <% @fixed_elements.each do |element| %>
-      <sl-tab slot="nav" panel="fixed-element-<%= element.id %>">
-        <%= element.display_name %>
-      </sl-tab>
+<%= turbo_frame_tag "alchemy_elements_window" do %>
+  <alchemy-elements-window>
+    <div class="elements-window-toolbar">
+      <%= render Alchemy::Admin::ToolbarButton.new(
+        url: alchemy.new_admin_element_path(page_version_id: @page_version.id),
+        icon: :add,
+        hotkey: "alt+n",
+        label: Alchemy.t("New Element"),
+        dialog_options: {
+          title: Alchemy.t("New Element"),
+          size: "320x125"
+        },
+        if_permitted_to: [:create, Alchemy::Element]
+      ) %>
+      <%= render Alchemy::Admin::ToolbarButton.new(
+        url: alchemy.admin_clipboard_path(remarkable_type: "elements"),
+        label: Alchemy.t("Show clipboard"),
+        icon: :clipboard,
+        icon_style: clipboard_empty?("elements") ? "line" : "fill",
+        dialog_options: {
+          title: Alchemy.t("Clipboard"),
+          size: "400x305"
+        },
+        link_options: {
+          id: "clipboard_button"
+        },
+        if_permitted_to: [:index, :alchemy_admin_clipboard]
+      ) %>
+      <sl-tooltip content="<%= Alchemy.t("Collapse all elements") %>" placement="top-end" class="right">
+        <button id="collapse-all-elements-button" class="icon_button">
+          <alchemy-icon name="contract-up-down"></alchemy-icon>
+        </button>
+      </sl-tooltip>
+    </div>
+    <% if @page.element_definitions.any? { |el| el["fixed"] } %>
+      <sl-tab-group id="fixed-elements">
+        <sl-tab slot="nav" panel="main-content-elements">
+          <%= Alchemy.t(:main_content) %>
+        </sl-tab>
+        <% @fixed_elements.each do |element| %>
+          <sl-tab slot="nav" panel="fixed-element-<%= element.id %>">
+            <%= element.display_name %>
+          </sl-tab>
+        <% end %>
+        <sl-tab-panel
+          name="main-content-elements"
+          class="sortable-elements scrollable-elements"
+          data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
+          data-element-name="main-content-elements"
+          id="main-content-elements"
+          style="--padding: 0"
+        >
+          <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
+        </sl-tab-panel>
+        <% @fixed_elements.each do |element| %>
+          <sl-tab-panel name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements">
+            <%= render Alchemy::ElementEditor.new(element) %>
+          </sl-tab-panel>
+        <% end %>
+      </sl-tab-group>
+    <% else %>
+      <div
+        id="main-content-elements"
+        class="sortable-elements scrollable-elements"
+        data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
+        data-element-name="main-content-elements"
+      >
+        <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
+      </div>
     <% end %>
-    <sl-tab-panel
-      name="main-content-elements"
-      class="sortable-elements scrollable-elements"
-      data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
-      data-element-name="main-content-elements"
-      id="main-content-elements"
-      style="--padding: 0"
-    >
-      <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
-    </sl-tab-panel>
-    <% @fixed_elements.each do |element| %>
-      <sl-tab-panel name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements">
-        <%= render Alchemy::ElementEditor.new(element) %>
-      </sl-tab-panel>
-    <% end %>
-  </sl-tab-group>
-<% else %>
-  <div
-    id="main-content-elements"
-    class="sortable-elements scrollable-elements"
-    data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
-    data-element-name="main-content-elements"
-  >
-    <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
-  </div>
+  </alchemy-elements-window>
 <% end %>