alchemy_cms 8.0.10 → 8.1.0

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

@@ -8,7 +8,7 @@
   margin-left: var(--main-menu-width);
   padding-right: var(--main-menu-width);
   z-index: 20;
-  width: 100%;
+  width: 100vw;
   height: var(--top-menu-height);
   @extend .disable-user-select;
 }

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

@@ -64,8 +64,7 @@ alchemy-message {
   }
 
   h1 {
-    font-size: 1.3rem;
-    line-height: 1.1;
+    font-size: var(--font-size_medium);
   }
 
   h1,

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

@@ -94,13 +94,6 @@ select {
           }
         }
       }
-
-      .select2-search-choice-close {
-        position: static;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-      }
     }
 
     &.medium {
@@ -141,26 +134,17 @@ select {
     }
   }
 
-  &.select2-container-multi,
   &.select2-allowclear {
     .select2-search-choice-close {
+      position: static;
+      display: inline-flex;
       left: auto;
       right: var(--spacing-1);
       top: 5px;
       background: none;
       text-decoration: none;
-
-      &:before {
-        content: "";
-        display: inline-flex;
-        width: 12px;
-        height: 12px;
-        background: var(--select-close-icon) no-repeat;
-      }
-
-      &:hover {
-        color: var(--icon-color);
-      }
+      align-items: center;
+      justify-content: center;
     }
   }
 
@@ -175,12 +159,30 @@ select {
       }
     }
 
+    &.select2-container-disabled {
+      .select2-choices {
+        background-color: var(--select-disabled-background-color);
+        border-color: var(--select-disabled-border-color);
+        cursor: not-allowed;
+        color: var(--select-disabled-text-color);
+      }
+    }
+
+    .select2-search-choice-close {
+      position: absolute;
+      left: initial;
+      right: var(--spacing-1);
+    }
+
     .select2-choices {
       @extend %default-input-style;
       padding: 0 var(--spacing-0);
       width: 100%;
 
       .select2-search-choice {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-0);
         margin: var(--spacing-1);
         padding: var(--spacing-1) var(--spacing-6) var(--spacing-1)
           var(--spacing-2);
@@ -211,6 +213,20 @@ select {
   .select2-default {
     color: var(--text-color-muted) !important;
   }
+
+  .select2-search-choice-close {
+    &:before {
+      content: "";
+      display: inline-flex;
+      width: 12px;
+      height: 12px;
+      background: var(--select-close-icon) no-repeat;
+    }
+
+    &:hover {
+      color: var(--icon-color);
+    }
+  }
 }
 
 .select2-drop {
@@ -326,7 +342,6 @@ select {
   only screen and (min-resolution: 2dppx) {
   #alchemy {
     .select2-search input,
-    .select2-search-choice-close,
     .select2-container .select2-choice abbr,
     .select2-container .select2-choice .select2-arrow b {
       background-image: none !important;

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

@@ -89,7 +89,7 @@
 
   --sl-transition-x-slow: 1000ms;
   --sl-transition-slow: 500ms;
-  --sl-transition-medium: 250ms;
+  --sl-transition-medium: var(--transition-duration);
   --sl-transition-fast: 150ms;
   --sl-transition-x-fast: 50ms;
 
@@ -309,6 +309,19 @@ sl-tooltip {
   }
 }
 
+sl-button {
+  &::part(base),
+  &::part(prefix),
+  &::part(spinner),
+  &::part(label) {
+    transition-property: background-color, border-color, color, fill;
+    transition-duration: var(--sl-transition-medium);
+  }
+  &[disabled]::part(base) {
+    border-color: var(--button-disabled-border-color);
+  }
+}
+
 sl-dialog {
   &::part(panel) {
     background-color: var(--dialog-background-color);

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

@@ -58,11 +58,18 @@
   }
 }
 
-#sitemap-wrapper {
+alchemy-sitemap {
+  display: block;
   position: relative;
   min-height: calc(100vh - 148px);
 }
 
+#alchemy_pages_tree {
+  display: block;
+  height: calc(100vh - var(--top-menu-height) - var(--spacing-3));
+  position: relative;
+}
+
 #sitemap {
   padding: 0 0 104px 0;
 
@@ -221,10 +228,11 @@
   }
 
   .sitemap_tool {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     width: var(--spacing-8);
     height: var(--spacing-8);
-    line-height: var(--sitemap-line-height);
-    text-align: center;
     margin: 0;
 
     &.disabled .icon {

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

@@ -3,9 +3,10 @@
 .tag-list {
   display: flex;
   flex-direction: column;
+  margin-top: var(--spacing-3);
   margin-bottom: var(--spacing-2);
 
-  label {
+  > label {
     display: block;
     font-weight: bold;
     font-size: var(--font-size_medium);
@@ -83,6 +84,7 @@
 #tags_tag_list {
   alchemy-list-filter {
     margin-top: 0;
+    margin-bottom: var(--spacing-0);
   }
 
   ul.tags {

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

@@ -75,7 +75,7 @@
   height: 29px;
   border-right-style: solid;
   border-right-width: 1px;
-  border-right-color: var(--border-color);
+  border-right-color: var(--toolbar-spacer-color);
   margin-right: var(--spacing-1);
   margin-left: var(--spacing-1);
 }

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

@@ -1,2 +1,2 @@
 <%= render 'alchemy/menubar' %>
-<%= render "alchemy/preview_mode_code" %>
+<%= render "alchemy/preview_mode_code" %>

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

@@ -97,7 +97,7 @@
           </svg>
           <%= Alchemy.t(:edit_page) %>
         <% end %>
-        <%= form_tag Alchemy.logout_path, method: Alchemy.logout_method do %>
+        <%= form_tag Alchemy.config.logout_path, method: Alchemy.config.logout_method do %>
           <%= button_tag class: "button" do %>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
               <path d="M5 22C4.44772 22 4 21.5523 4 21V3C4 2.44772 4.44772 2 5 2H19C19.5523 2 20 2.44772 20 3V6H18V4H6V20H18V18H20V21C20 21.5523 19.5523 22 19 22H5ZM18 16V13H11V11H18V8L23 12L18 16Z"></path>

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

@@ -1,35 +1,39 @@
-<div id="overlay_toolbar">
-  <div class="toolbar_buttons">
-    <% if can? :create, Alchemy::Attachment %>
-      <div class="toolbar_button">
-        <%= render 'alchemy/admin/uploader/button',
-          object: Alchemy::Attachment.new,
-          dropzone: '#assign_file_list',
-          file_attribute: 'file',
-          in_dialog: true,
-          accept: Array(search_filter_params[:only]).map { |extension|
-            Marcel::MimeType.for(extension:)
-          }.join(",").presence,
-          redirect_url: admin_attachments_path(
-            form_field_id: @form_field_id
-          ) %>
-      </div>
-    <% end %>
+<%= turbo_frame_tag "archive_overlay" do %>
+  <div id="overlay_toolbar">
+    <div class="toolbar_buttons">
+      <% if can? :create, Alchemy::Attachment %>
+        <div class="toolbar_button">
+          <%= render 'alchemy/admin/uploader/button',
+            object: Alchemy::Attachment.new,
+            dropzone: '#assign_file_list',
+            file_attribute: 'file',
+            in_dialog: true,
+            accept: Array(search_filter_params[:only]).map { |extension|
+              Marcel::MimeType.for(extension:)
+            }.join(",").presence,
+            redirect_url: admin_attachments_path(
+              form_field_id: @form_field_id,
+              only: search_filter_params[:only],
+              except: search_filter_params[:except],
+              q: search_filter_params[:q].merge(
+                last_upload: true
+              )
+            ) %>
+        </div>
+      <% end %>
+    </div>
+
+    <%= render 'alchemy/admin/partials/overlay_search_form' %>
   </div>
-  <%= render 'alchemy/admin/partials/remote_search_form' %>
-</div>
 
-<div id="assign_file_list" class="with_padding<%= search_filter_params[:tagged_with].present? ? ' filtered' : '' %>">
-  <div id="library_sidebar">
-    <%= render 'filter_bar' if resource_has_filters %>
+  <div
+    id="assign_file_list"
+    class="with_padding<%= search_filter_params[:tagged_with].present? ? ' filtered' : '' %>"
+  >
+    <%= render 'library_sidebar' %>
 
-    <% if Alchemy::Attachment.tag_counts.any? %>
-      <div class="tag-list">
-        <%= render 'tag_list' %>
-      </div>
-    <% end %>
-  </div>
-  <div id="overlay_file_list" class="with_tag_list">
-    <%= render 'overlay_file_list' %>
+    <div id="overlay_file_list" class="with_tag_list">
+      <%= render 'overlay_file_list' %>
+    </div>
   </div>
-</div>
+<% end %>

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

@@ -0,0 +1,6 @@
+<div id="library_sidebar">
+  <%= render "sorting_select" %>
+  <%= render "filter_bar" if resource_has_filters %>
+
+  <div class="tag-list"><%= render "tag_list" %></div>
+</div>

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

@@ -18,5 +18,5 @@
     </li>
     <%= render partial: 'file_to_assign', collection: @attachments %>
   </ul>
-  <%= render "alchemy/admin/resources/pagination", resources: @attachments, remote: true, hide_per_page_select: true %>
+  <%= render "alchemy/admin/resources/pagination", resources: @attachments, hide_per_page_select: true %>
 <% end %>

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

@@ -1,8 +1,7 @@
-<% file_upload_id = "file_upload_#{dom_id(object)}" %>
 <% file_types = Alchemy.config.uploader.allowed_filetypes[object.class.model_name.collection] || ['*'] %>
 <% accept ||= file_types.to_a == ["*"] ? nil : file_types.map {|type| ".#{type}"}.join(", ") %>
 
-<alchemy-uploader id="<%= file_upload_id %>">
+<alchemy-uploader redirect-url="<%= redirect_url %>">
   <%= form_for [:admin, object], html: {multipart: true, class: 'upload-button'} do |f| %>
     <%= f.file_field file_attribute,
       class: 'fileupload--field', accept: accept,
@@ -13,9 +12,3 @@
     <% end %>
   <% end %>
 </alchemy-uploader>
-
-<script type="text/javascript">
-  document.getElementById("<%= file_upload_id %>").addEventListener("Alchemy.upload.successful", (event) => {
-    Turbo.visit('<%= redirect_url.html_safe %>');
-  })
-</script>

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

@@ -0,0 +1,13 @@
+<div id="sorting_select">
+  <div class="filter-input">
+    <alchemy-auto-submit>
+      <%= label_tag "q[s]", t(".label") %>
+      <%= select_tag "q[s]", options_for_select([
+        [t(".by_latest"), "created_at desc"],
+        [t(".alphabetical"), "name asc"]
+      ], search_filter_params.dig(:q, :s)),
+      form: "resource_search",
+      class: "full_width" %>
+    </alchemy-auto-submit>
+  </div>
+</div>

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

@@ -1,14 +1,13 @@
 <% if Alchemy::Attachment.tag_counts.any? %>
   <h3><%= Alchemy.t("Filter by tag") %></h3>
-  <%= render Alchemy::Admin::ListFilter.new(".tag-list li") %>
+  <%= render Alchemy::Admin::ListFilter.new(".tag-list li", placeholder: Alchemy.t("Filter tags")) %>
   <ul>
-    <%= render_tag_list('Alchemy::Attachment') %>
+    <%= render Alchemy::Admin::TagsList.new('Alchemy::Attachment') %>
   </ul>
   <% if search_filter_params[:tagged_with].present? %>
     <%= link_to(
       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'
     ) %>
   <% end %>

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

@@ -3,26 +3,20 @@
     <% if can? :create, Alchemy::Attachment %>
       <div class="toolbar_button">
         <%= render 'alchemy/admin/uploader/button',
-          redirect_url: alchemy.admin_attachments_path,
+          redirect_url: alchemy.admin_attachments_path(q: {
+            last_upload: true
+          }),
           object: Alchemy::Attachment.new,
           file_attribute: 'file' %>
       </div>
     <% end %>
   </div>
+
   <%= render 'alchemy/admin/partials/search_form' %>
 <% end %>
 
 <div id="archive_all" class="with_tag_filter resources-table-wrapper">
   <%= render 'alchemy/admin/resources/table_header' %>
   <%= render 'files_list' %>
-
-  <div id="library_sidebar">
-    <%= render 'filter_bar' if resource_has_filters %>
-
-    <% if Alchemy::Attachment.tag_counts.any? %>
-      <div class="tag-list with_filter_bar<%= ' filtered' if search_filter_params[:tagged_with].present? %>">
-        <%= render 'tag_list' %>
-      </div>
-    <% end %>
-  </div>
+  <%= render 'library_sidebar' %>
 </div>

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

@@ -51,7 +51,7 @@
       <%= video_tag(@attachment.url, preload: "metadata", controls: true) %>
     </div>
     <% when "application/pdf" %>
-    <iframe src="<%= @attachment.url %>" frameborder="0"></iframe>
+    <iframe src="<%= @attachment.url %>" frameborder="0" title="Alchemy.t('File preview')"></iframe>
     <% end %>
   <% end %>
 </div>

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

@@ -8,5 +8,6 @@
     size: "400x305"
   },
   id: "clipboard_button",
+  tooltip_placement: local_assigns.fetch(:tooltip_placement, "top-start"),
   if_permitted_to: [:index, :alchemy_admin_clipboard]
 ) %>

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

@@ -1,18 +1,17 @@
 <%= turbo_frame_tag :clipboard_items do %>
-  <% if @clipboard_items.blank? %>
+  <% if clipboard_items.blank? %>
     <%= render_message do %>
       <%= Alchemy.t('No items in your clipboard') %>
     <% end %>
   <% else %>
     <%= render_message do %>
-      <%= Alchemy.t('Add items from clipboard via "Add Element" button') %>
+      <%= Alchemy.t("Add items from clipboard via \"Add #{remarkable_type.singularize.capitalize}\" button") %>
     <% end %>
-
     <ul>
-      <% @clipboard_items.each do |item| %>
+      <% clipboard_items.each do |item| %>
         <% item_class = item.class.name.demodulize.underscore.pluralize %>
         <li id="clipboard_item_<%= item.id %>" class="<%= item_class %>">
-          <% if item_class == 'pages' %>
+          <% if %[pages nodes].include? item_class %>
             <%= render_icon(:file) %>
             <%= truncate(item.name, length: 50) %>
           <% else %>

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

@@ -1,6 +1,6 @@
 <% if @item.class.name == 'Alchemy::Element' && params[:remove] -%>
   <% if @item.fixed? -%>
-    <alchemy-action name="removeFixedElement" params="[<%= @item.id %>]" />
+    <alchemy-action name="removeFixedElement" params="[<%= @item.id %>]"></alchemy-action>
   <% else -%>
     <%= turbo_stream.remove "element_#{@item.id}" %>
   <% end -%>

data/app/views/alchemy/admin/crop.html.erb

@@ -1,15 +1,15 @@
-<div id="jscropper">
 <% if @no_image_notice %>
   <%= render_message :warn do %>
     <%= @no_image_notice %>
   <% end %>
 <% else %>
+<div id="jscropper">
   <%= render_message do %>
     <%= simple_format Alchemy.t(:explain_cropping) %>
   <% end %>
-  <div class="thumbnail_background">
-    <%= image_tag @picture.url(flatten: true), id: 'imageToCrop' %>
-  </div>
+  <%= content_tag "alchemy-picture-thumbnail", nil,
+    src: @picture.url(flatten: true),
+    id: "imageToCrop" %>
   <form>
     <%= button_tag Alchemy.t(:apply), type: 'submit' %>
     <%= button_tag Alchemy.t('Reset Imagemask'), class: 'reset_mask secondary', type: 'reset' %>
@@ -19,11 +19,9 @@
 <% if @settings %>
 <script type="module">
   import ImageCropper from "alchemy_admin/image_cropper";
-  import ImageLoader from "alchemy_admin/image_loader";
 
-  const image = document.getElementById("imageToCrop");
+  const image = document.getElementById("imageToCrop")?.querySelector("img");
 
-  new ImageLoader(image);
   new ImageCropper(
     image,
     <%= @settings[:default_box].to_json %>,

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

@@ -37,7 +37,7 @@
       </td>
       <td>
         <% 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_path)) do %>
+        <%= 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') %>
           </button>

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

@@ -1,25 +1,25 @@
 <%= content_tag :div, class: 'add-nested-element', data: { element_id: element.id } do %>
   <% if element.nestable_elements.length == 1 &&
     (nestable_element = element.nestable_elements.first) &&
-    Alchemy::Element.all_from_clipboard_for_parent_element(get_clipboard("elements"), element).none?
+    Alchemy::Element.all_from_clipboard_for_parent_element(clipboard, element).none?
   %>
     <%= turbo_frame_tag("new_nested_element_#{element.id}") do %>
       <%= form_for [:admin, Alchemy::Element.new(name: nestable_element)], html: { class: 'add-nested-element-form', id: nil } do |f| %>
         <%= 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_tag class: "add-nestable-element-button", is: "alchemy-button", disabled: cannot?(:create, Alchemy::Element) do %>
           <%= Alchemy.t(:add_nested_element, name: Alchemy.t(nestable_element.to_sym, scope: 'element_names')) %>
-        </button>
+        <% end %>
       <% end %>
     <% end %>
   <% else %>
     <%= link_to_dialog (nestable_element ? Alchemy.t(:add_nested_element, name: Alchemy.t(nestable_element.to_sym, scope: 'element_names')) : Alchemy.t("New Element")),
-      alchemy.new_admin_element_path(
+      can?(:create, Alchemy::Element) ? alchemy.new_admin_element_path(
         parent_element_id: element.id,
         page_version_id: element.page_version_id
-      ), {
-        size: "320x125",
+      ) : nil, {
+        size: "380x125",
         title: Alchemy.t("New Element")
       }, class: "button add-nestable-element-button" %>
   <% end %>

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

@@ -2,5 +2,5 @@
   <%= element.display_name %>
 </sl-tab>
 <sl-tab-panel id="fixed_element_<%= element.id %>" name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements">
-  <%= render Alchemy::ElementEditor.new(element) %>
+  <%= render Alchemy::Admin::ElementEditor.new(element: element) %>
 </sl-tab-panel>

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

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

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

@@ -1,15 +1,15 @@
 <div class="element-header<%= ' has-hint' if element.has_hint? %>">
-  <span class="element-handle">
+  <span class="element-handle<%= ' draggable' if can?(:order, element) %>">
     <% if element.definition.blank? %>
-      <%= hint_with_tooltip Alchemy.t(:element_definition_missing) %>
+      <%= hint_with_tooltip Alchemy.t(:element_definition_missing), icon_class: "element-icon" %>
     <% elsif element.deprecated? %>
-      <%= hint_with_tooltip element.deprecation_notice %>
+      <%= hint_with_tooltip element.deprecation_notice, icon_class: "element-icon" %>
     <% else %>
-      <span class="icon element">
+      <span class="element-icon">
         <%= element.definition.icon_file %>
       </span>
-      <%= render_icon(:draggable, style: false, fixed_width: false) %>
     <% end %>
+    <%= render_icon(:draggable, style: false, fixed_width: false, class: "handle-icon") %>
   </span>
   <span class="element-title">
     <span class="preview_text_element_name"><%= element.display_name %></span>

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

@@ -1,34 +1,59 @@
 <% remarkable_type = "elements" %>
 <div class="element-toolbar">
-  <sl-tooltip placement="top-start" content="<%= Alchemy.t(:copy_element) %>">
+  <sl-tooltip
+    placement="top-start"
+    content="<%= Alchemy.t(:copy_element) %>"
+    <%= "disabled" if cannot?(:create, element) %>
+  >
     <%= button_to(
       render_icon("file-copy"),
       alchemy.insert_admin_clipboard_path(remarkable_type: remarkable_type, remarkable_id: element.id),
       "data-turbo-method": :post,
-      class: "icon_button"
+      class: "icon_button",
+      disabled: cannot?(:create, element)
     ) %>
   </sl-tooltip>
-  <sl-tooltip content="<%= Alchemy.t(:cut_element) %>">
+  <sl-tooltip
+    content="<%= Alchemy.t(:cut_element) %>"
+    <%= "disabled" if cannot?(:create, element) %>
+  >
     <%= button_to(
       render_icon("scissors-cut"),
       alchemy.insert_admin_clipboard_path(remarkable_type: remarkable_type, remarkable_id: element.id, remove: true),
       "data-turbo-method": :post,
-      class: "icon_button"
+      class: "icon_button",
+      disabled: cannot?(:create, element)
     ) %>
   </sl-tooltip>
-  <sl-tooltip content="<%= Alchemy.t("Delete element") %>">
+  <sl-tooltip
+    content="<%= Alchemy.t("Delete element") %>"
+    <%= "disabled" if cannot?(:destroy, element) %>
+  >
     <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">
+      <button
+        class="icon_button"
+        data-turbo="false"
+        type="button"
+        <%= "disabled" if cannot?(:destroy, element) %>
+      >
         <%= 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">
+  <sl-tooltip
+    content="<%= element.public? ? Alchemy.t(:hide_element) : Alchemy.t(:show_element) %>"
+    placement="top-end"
+    <%= "disabled" if cannot?(:update, element) %>
+  >
     <alchemy-publish-element-button>
-      <sl-switch <%= element.public? ? nil : "checked" %> size="small">
+      <sl-switch
+        size="small"
+        <%= "checked" if !element.public? %>
+        <%= "disabled" if cannot?(:update, element) %>
+      >
         <%= t(".hide") %>
       </sl-switch>
     </alchemy-publish-element-button>