alchemy_cms 7.0.14 → 7.1.0.pre.b1

data/app/views/alchemy/admin/pages/_locked_page.html.erb

@@ -3,11 +3,11 @@
 <% else %>
   <div class="locked_page wide" id="locked_page_<%= locked_page.id %>">
     <%= link_to alchemy.edit_admin_page_path(locked_page) do %>
-      <%= render 'alchemy/admin/pages/page_status', page: locked_page, truncate: true %>
+      <%= render 'alchemy/admin/pages/page_infos', page: locked_page, truncate: true %>
     <% end %>
     <%= form_tag(alchemy.unlock_admin_page_path(locked_page), remote: true) do %>
       <button class="icon_button small" title="<%= Alchemy.t(:explain_unlocking) %>">
-        <%= render_icon(:times, size: 'xs') %>
+        <%= render_icon(:close, size: '1x') %>
       </button>
     <% end %>
   </div>

data/app/views/alchemy/admin/pages/_new_page_form.html.erb

@@ -3,7 +3,9 @@
     <%= f.hidden_field(:parent_id) %>
   <% else %>
     <% @page.parent = @current_language.root_page %>
-    <%= f.input :parent_id, as: :string, input_html: { class: 'alchemy_selectbox' } %>
+    <%= render Alchemy::Admin::PageSelect.new(@page.parent) do %>
+      <%= f.input :parent_id, as: :string %>
+    <% end %>
   <% end %>
   <%= f.hidden_field(:language_id) %>
   <%= f.hidden_field(:layoutpage) %>
@@ -13,22 +15,7 @@
     include_blank: @page_layouts.length == 1 ? nil : Alchemy.t('Please choose'),
     required: true,
     selected: @page_layouts.length == 1 ? @page_layouts.first : nil,
-    input_html: {class: 'alchemy_selectbox'} %>
+    input_html: {is: 'alchemy-select'} %>
   <%= f.input :name %>
   <%= f.submit Alchemy.t(:create) %>
 <% end %>
-
-<script>
-  $('input[type="text"]#page_parent_id').alchemyPageSelect({
-    placeholder: "<%= Alchemy.t(:search_page) %>",
-    url: "<%= alchemy.api_pages_path %>",
-    allowClear: false,
-    <% if @page.parent %>
-    initialSelection: {
-      id: <%= @page.parent.id %>,
-      text: "<%= @page.parent.name %>",
-      url_path: "<%= @page.parent.url_path %>"
-    }
-    <% end %>
-  })
-</script>

data/app/views/alchemy/admin/pages/_page.html.erb

@@ -6,137 +6,141 @@
         <%= page_layout_missing_warning %>
       {{else}}
         {{#if permissions.edit_content}}
-          {{#if locked}}
-            <span class="with-hint">
-              <i class="icon fas fa-edit fa-fw"></i>
-              <span class="hint-bubble">
-                {{locked_notice}}
-              </span>
-            </span>
-          {{else}}
           <span class="{{#unless root}}handle{{/unless}}">
-            <i class="icon far fa-file fa-lg"></i>
+            {{#if locked}}
+              <sl-tooltip content="{{locked_notice}}" class="like-hint-tooltip" placement="bottom-start">
+                <i class="icon ri-file-edit-line ri-fw ri-xl"></i>
+              </sl-tooltip>
+            {{else}}
+              <i class="icon ri-file-line ri-fw ri-xl"></i>
+            {{/if}}
           </span>
-          {{/if}}
         {{else}}
-          <span class="with-hint">
-            <i class="icon fas fa-ban fa-fw"></i>
-            <span class="hint-bubble">
-              <%= Alchemy.t("Your user role does not allow you to edit this page") %>
-            </span>
-          </span>
+          <sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
+            <i class="icon ri-file-forbid-line ri-fw ri-xl"></i>
+          </sl-tooltip>
         {{/if}}
       {{/if}}
     </div>
     <div class="sitemap_right_tools">
       {{#if permissions.info}}
-      <div class="button_with_label sitemap_tool">
+      <sl-tooltip content="<%= Alchemy.t(:page_infos) %>">
         <%= link_to_dialog(
-          render_icon("info-circle"),
+          render_icon("information"),
           alchemy.info_admin_page_path(id: "__ID__"),
           {
             title: Alchemy.t(:page_infos),
             size: "520x290"
-          }
+          },
+          class: "icon_button"
         ) %>
-        <label class="center"><%= Alchemy.t(:page_infos) %></label>
+      </sl-tooltip>
       {{else}}
-      <div class="sitemap_tool disabled with-hint">
-        <%= render_icon("info-circle") %>
-        <span class="hint-bubble">
-          <%= Alchemy.t("Your user role does not allow you to edit this page") %>
-        </span>
-      {{/if}}
+      <div class="sitemap_tool disabled">
+        <sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
+          <%= render_icon("information") %>
+        </sl-tooltip>
       </div>
+      {{/if}}
       {{#if permissions.configure}}
-      <div class="button_with_label sitemap_tool">
+      <sl-tooltip content="<%= Alchemy.t(:edit_page_properties) %>">
         <%= link_to_dialog(
-          render_icon(:cog),
+          render_icon("settings-3"),
           alchemy.configure_admin_page_path(id: "__ID__"),
           {
             title: Alchemy.t(:edit_page_properties),
             size: "450x680"
-          }
+          },
+          class: "icon_button"
         ) -%>
-        <label class="center"><%= Alchemy.t(:edit_page_properties) %></label>
+      </sl-tooltip>
       {{else}}
-      <div class="sitemap_tool disabled with-hint">
-        <%= render_icon(:cog) %>
-        <span class="hint-bubble">
-          <%= Alchemy.t("Your user role does not allow you to edit this page") %>
-        </span>
-      {{/if}}
+      <div class="sitemap_tool disabled">
+        <sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
+          <%= render_icon("settings-3") %>
+        </sl-tooltip>
       </div>
+      {{/if}}
       {{#if permissions.copy}}
-      <div class="button_with_label sitemap_tool">
+      <sl-tooltip content="<%= Alchemy.t(:copy_page) %>">
         <%= link_to(
-          render_icon(:copy),
+          render_icon("file-copy"),
           alchemy.insert_admin_clipboard_path(
             remarkable_type: :pages,
             remarkable_id: "__ID__",
           ),
           remote: true,
-          method: :post
+          method: :post,
+          class: "icon_button"
         ) %>
-        <label class="center"><%= Alchemy.t(:copy_page) %></label>
+      </sl-tooltip>
       {{else}}
-      <div class="sitemap_tool disabled with-hint">
-        <%= render_icon(:copy) %>
-        <span class="hint-bubble">
-          <%= Alchemy.t("Your user role does not allow you to edit this page") %>
-        </span>
-      {{/if}}
+      <div class="sitemap_tool disabled">
+        <sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
+          <%= render_icon("file-copy") %>
+        </sl-tooltip>
       </div>
+      {{/if}}
       {{#if permissions.destroy}}
-      <div class="button_with_label sitemap_tool">
+      <sl-tooltip content="<%= Alchemy.t(:delete_page) %>">
         <%= link_to_confirm_dialog(
-          render_icon(:minus),
+          render_icon("delete-bin-2"),
           Alchemy.t(:confirm_to_delete_page),
           url_for(
             controller: "pages",
             action: "destroy",
             id: "__ID__"
-          )
+          ),
+          class: "icon_button"
         ) -%>
-        <label class="center"><%= Alchemy.t(:delete_page) %></label>
+      </sl-tooltip>
       {{else}}
-      <div class="sitemap_tool disabled with-hint">
-        <%= render_icon(:minus) %>
-        <span class="hint-bubble">
-          <%= Alchemy.t("Your user role does not allow you to edit this page") %>
-        </span>
-      {{/if}}
+      <div class="sitemap_tool disabled">
+        <sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
+          <%= render_icon("delete-bin-2") %>
+        </sl-tooltip>
       </div>
+      {{/if}}
       {{#if permissions.create}}
-      <div class="button_with_label sitemap_tool">
+      <sl-tooltip content="<%= Alchemy.t(:create_page) %>">
         <%= link_to_dialog(
-          render_icon(:plus),
+          render_icon(:add),
           alchemy.new_admin_page_path(parent_id: "__ID__"),
           {
             title: Alchemy.t(:create_page),
             size: "340x165",
             overflow: true
-          }
+          },
+          class: "icon_button"
         ) -%>
-        <label class="left"><%= Alchemy.t(:create_page) %></label>
+      </sl-tooltip>
       {{else}}
-      <div class="sitemap_tool disabled with-hint">
-        <%= render_icon(:plus) %>
-        <span class="hint-bubble">
-          <%= Alchemy.t("Your user role does not allow you to edit this page") %>
-        </span>
-      {{/if}}
+      <div class="sitemap_tool disabled">
+        <sl-tooltip content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" class="like-hint-tooltip" placement="bottom-start">
+          <%= render_icon("file-add") %>
+        </sl-tooltip>
       </div>
+      {{/if}}
     </div>
     <div class="page_infos">
-      <span class="page_status with-hint">
-        <i class="icon fas fa-fw fa-compass {{#unless public}}disabled{{/unless}}" data-fa-transform="shrink-2"></i>
-        <span class="hint-bubble">{{status_titles.public}}</span>
+      {{#if locked}}
+      <span class="page_status locked">
+        <i class="icon ri-fw ri-1x ri-edit-line"></i>
+        {{status_titles.locked}}
       </span>
-      <span class="page_status with-hint">
-        <i class="icon fas fa-fw fa-lock {{#unless restricted}}disabled{{/unless}}" data-fa-transform="shrink-2"></i>
-        <span class="hint-bubble">{{status_titles.restricted}}</span>
+      {{/if}}
+      {{#if restricted}}
+      <span class="page_status">
+        <i class="icon ri-fw ri-1x ri-lock-line"></i>
+        {{status_titles.restricted}}
+      </span>
+      {{/if}}
+      {{#unless public}}
+      <span class="page_status">
+        <i class="icon ri-fw ri-1x ri-cloud-off-line"></i>
+        {{status_titles.public}}
       </span>
+      {{/unless}}
     </div>
     <div class="sitemap_url" title="{{url_path}}">
       {{ url_path }}

data/app/views/alchemy/admin/pages/_page_infos.html.erb

@@ -1,8 +1,24 @@
-<span class="page_status with-hint">
-  <%= render_icon(:compass, transform: 'shrink-2', class: @page.public? ? nil : 'disabled') %>
-  <span class="hint-bubble"><%= page.status_title(:public) %></span>
-</span>
-<span class="page_status with-hint">
-  <%= render_icon(:lock, transform: 'shrink-2', class: @page.restricted? ? nil : 'disabled') %>
-  <span class="hint-bubble"><%= page.status_title(:restricted) %></span>
+<% if page.definition.blank? %>
+  <%= page_layout_missing_warning %>
+<% end %>
+<span class="page_name" title="<%= page.name %>">
+  <% if local_assigns[:truncate] %>
+    <%= truncate page.name, length: 15 %>
+  <% else %>
+    <%= page.name %>
+  <% end %>
 </span>
+<%- if multi_site? -%>
+  <span class="page_site" title="<%= page.site_name %>">
+    <% if local_assigns[:truncate] %>
+      <%= truncate page.site_name, length: 15 %>
+    <% else %>
+      <%= page.site_name %>
+    <% end %>
+  </span>
+<%- end -%>
+<%- if page.site_languages.many? -%>
+  <span class="page_language" title="<%= page.language.name %>">
+    <%= page.language_code %>
+  </span>
+<%- end -%>

data/app/views/alchemy/admin/pages/_page_layout_filter.html.erb

@@ -13,7 +13,8 @@
         search_filter_params[:page_layout]
       ),
       include_blank: Alchemy.t(:all, scope: ["resources", "page", "filters"]),
-      class: "alchemy_selectbox full_width"
+      class: "full_width",
+      is: "alchemy-select"
     ) %>
   </label>
 </div>

data/app/views/alchemy/admin/pages/_page_status.html.erb

@@ -1,24 +1,14 @@
-<% if page.definition.blank? %>
-  <%= page_layout_missing_warning %>
-<% end %>
-<span class="page_name" title="<%= page.name %>">
-  <% if local_assigns[:truncate] %>
-    <%= truncate page.name, length: 15 %>
+<span class="page_status">
+  <% if page.public? %>
+    <%= render_icon(:cloud, size: "1x", class: "disabled") %>
   <% else %>
-    <%= page.name %>
+    <%= render_icon("cloud-off", size: "1x") %>
+  <% end %>
+</span>
+<span class="page_status">
+  <% if page.restricted? %>
+    <%= render_icon(:lock, size: "1x") %>
+  <% else %>
+    <%= render_icon("lock-unlock", size: "1x", class: "disabled") %>
   <% end %>
 </span>
-<%- if multi_site? -%>
-  <span class="page_site" title="<%= page.site_name %>">
-    <% if local_assigns[:truncate] %>
-      <%= truncate page.site_name, length: 15 %>
-    <% else %>
-      <%= page.site_name %>
-    <% end %>
-  </span>
-<%- end -%>
-<%- if page.site_languages.many? -%>
-  <span class="page_language" title="<%= page.language.name %>">
-    <%= page.language_code %>
-  </span>
-<%- end -%>

data/app/views/alchemy/admin/pages/_publication_fields.html.erb

@@ -2,13 +2,10 @@
 
 <label class="checkbox">
 <% if @page.attribute_fixed?(:public_on) || @page.attribute_fixed?(:public_until) %>
-  <span class="with-hint">
+  <sl-tooltip class="like-hint-tooltip" content="<%= Alchemy.t(:attribute_fixed) %>" placement="bottom-start">
     <%= checkbox %>
     <%= Alchemy::Page.human_attribute_name :public %>
-    <span class="hint-bubble">
-      <%= Alchemy.t(:attribute_fixed) %>
-    </span>
-  </span>
+  </sl-tooltip>
 <% else %>
   <%= checkbox %>
   <%= Alchemy::Page.human_attribute_name :public %>

data/app/views/alchemy/admin/pages/_table.html.erb

@@ -17,7 +17,7 @@
           Alchemy::Page.human_attribute_name(:updated_at),
           default_order: "desc" %>
       </th>
-      <th class="status center"><%= Alchemy::Page.human_attribute_name(:status) %></th>
+      <th class="status right"><%= Alchemy::Page.human_attribute_name(:status) %></th>
       <th class="tools"></th>
     </tr>
   </thead>

data/app/views/alchemy/admin/pages/_table_row.html.erb

@@ -1,23 +1,17 @@
-<tr class="<%= cycle(:even, :odd) %>" data-page-id="<%= page.id %>">
+<tr class="<%= cycle(:even, :odd) %>" data-page-id="<%= page.id %>" id="page_<%= page.id %>">
   <td class="icon">
     <% if can?(:edit_content, page) %>
       <% if page.locked? %>
-        <span class="with-hint">
-          <i class="icon fas fa-edit fa-fw"></i>
-          <span class="hint-bubble">
-            <%= Alchemy.t("This page is locked", name: page.locker_name) %>
-          </span>
-        </span>
+        <sl-tooltip class="like-hint-tooltip" content="<%= Alchemy.t("This page is locked", name: page.locker_name) %>" placement="bottom-start">
+          <i class="icon ri-file-edit-line ri-fw ri-xl"></i>
+        </sl-tooltip>
       <% else %>
-        <i class="icon far fa-file fa-lg"></i>
+        <i class="icon ri-file-line ri-fw ri-xl"></i>
       <% end %>
     <% else %>
-      <span class="with-hint">
-        <i class="icon fas fa-ban fa-fw"></i>
-        <span class="hint-bubble">
-          <%= Alchemy.t("Your user role does not allow you to edit this page") %>
-        </span>
-      </span>
+      <sl-tooltip class="like-hint-tooltip" content="<%= Alchemy.t("Your user role does not allow you to edit this page") %>" placement="bottom-start">
+        <i class="icon ri-file-forbid-line ri-fw ri-xl"></i>
+      </sl-tooltip>
     <% end %>
   </td>
   <td class="string name">
@@ -42,45 +36,55 @@
   <td class="date">
     <%= l(page.updated_at, format: :"alchemy.default") %>
   </td>
-  <td class="status center">
-    <span class="page_status with-hint">
-      <i class="icon fas fa-fw fa-compass <% unless page.public? %>disabled<% end %>" data-fa-transform="shrink-2"></i>
-      <span class="hint-bubble"><%= page.status_title(:public) %></span>
-    </span>
-    <span class="page_status with-hint">
-      <i class="icon fas fa-fw fa-lock <% unless page.restricted? %>disabled<% end %>" data-fa-transform="shrink-2"></i>
-      <span class="hint-bubble"><%= page.status_title(:restricted) %></span>
-    </span>
+  <td class="status right">
+    <% if page.locked? %>
+      <span class="page_status locked">
+        <%= render_icon(:edit, size: "1x") %>
+        <%= page.status_title(:locked) %>
+      </span>
+    <% end %>
+    <% if page.restricted? %>
+      <span class="page_status">
+        <%= render_icon(:lock, size: "1x") %>
+        <%= page.status_title(:restricted) %>
+      </span>
+    <% end %>
+    <% unless page.public? %>
+      <span class="page_status">
+        <%= render_icon("cloud-off", size: "1x") %>
+        <%= page.status_title(:public) %>
+      </span>
+    <% end %>
   </td>
   <td class="tools">
     <% if can?(:info, page) %>
-      <div class="button_with_label">
+      <sl-tooltip content="<%= Alchemy.t(:page_infos) %>">
         <%= link_to_dialog(
           render_icon('info-circle'),
           alchemy.info_admin_page_path(page),
           {
             title: Alchemy.t(:page_infos),
             size: '520x290'
-          }
+          },
+          class: "icon_button"
         ) %>
-        <label class="center"><%= Alchemy.t(:page_infos) %></label>
-      </div>
+      </sl-tooltip>
     <% end %>
     <% if can?(:configure, page) %>
-      <div class="button_with_label sitemap_tool">
+      <sl-tooltip content="<%= Alchemy.t(:edit_page_properties) %>">
         <%= link_to_dialog(
           render_icon(:cog),
           alchemy.configure_admin_page_path(page),
           {
             title: Alchemy.t(:edit_page_properties),
             size: '450x680'
-          }
+          },
+          class: "icon_button"
         ) -%>
-        <label class="center"><%= Alchemy.t(:edit_page_properties) %></label>
-      </div>
+      </sl-tooltip>
     <% end %>
     <% if can?(:copy, page) %>
-      <div class="button_with_label sitemap_tool">
+      <sl-tooltip content="<%= Alchemy.t(:copy_page) %>">
         <%= link_to(
           render_icon(:copy),
           alchemy.insert_admin_clipboard_path(
@@ -88,20 +92,20 @@
             remarkable_id: page.id,
           ),
           remote: true,
-          method: :post
+          method: :post,
+          class: "icon_button"
         ) %>
-        <label class="center"><%= Alchemy.t(:copy_page) %></label>
-      </div>
+      </sl-tooltip>
     <% end %>
     <% if can?(:destroy, page) %>
-      <div class="button_with_label">
+      <sl-tooltip content="<%= Alchemy.t(:delete_page) %>">
         <%= link_to_confirm_dialog(
           render_icon(:minus),
           Alchemy.t(:confirm_to_delete_page),
-          alchemy.admin_page_path(page)
+          alchemy.admin_page_path(page),
+          class: "icon_button"
         ) -%>
-        <label class="center"><%= Alchemy.t(:delete_page) %></label>
-      </div>
+      </sl-tooltip>
     <% end %>
   </td>
 </tr>

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

@@ -2,61 +2,66 @@
   <%= render "alchemy/admin/partials/site_select" %>
   <%= render "alchemy/admin/partials/language_tree_select" %>
   <%= toolbar_button(
-    icon: :plus,
+    icon: "file-add",
     url: alchemy.new_admin_page_path(language: @current_language),
     hotkey: 'alt+n',
+    tooltip_placement: "top-start",
     dialog_options: {
       title: Alchemy.t('Add a page'),
       size: '340x215',
       overflow: true
     },
-    title: Alchemy.t('Add a page'),
     label: Alchemy.t('Add a page'),
     if_permitted_to: [:create, Alchemy::Page]
   ) %>
   <div class="toolbar_spacer"></div>
   <% if can?(:flush, Alchemy::Page) %>
-    <div class="button_with_label">
-      <%= link_to(
-        render_icon(:eraser),
-        alchemy.flush_admin_pages_path,
-        remote: true,
-        method: :post,
-        class: "icon_button please_wait",
-        title: Alchemy.t("Flush page cache")
-      ) %>
-      <label><%= Alchemy.t("Flush page cache") %></label>
+    <div class="toolbar_button">
+      <sl-tooltip content="<%= Alchemy.t("Flush page cache") %>">
+        <%= link_to(
+          render_icon(:eraser),
+          alchemy.flush_admin_pages_path,
+          remote: true,
+          method: :post,
+          class: "icon_button please_wait",
+          title: Alchemy.t("Flush page cache")
+        ) %>
+      </sl-tooltip>
     </div>
   <% end %>
-  <div class="button_with_label" id="clipboard_button">
-    <%= link_to_dialog(
-      render_icon(clipboard_empty?("pages") ? :clipboard : :paste),
-      alchemy.admin_clipboard_path(remarkable_type: "pages"),
-      {
-        title: Alchemy.t("Clipboard"),
-        size: "380x305"
-      },
-      class: "icon_button",
-      title: Alchemy.t("Show clipboard")
-    ) %>
-    <label><%= Alchemy.t("Show clipboard") %></label>
+  <div class="toolbar_button">
+    <sl-tooltip content="<%= Alchemy.t("Show clipboard") %>">
+      <%= link_to_dialog(
+        render_icon(:clipboard, style: clipboard_empty?("pages") ? "line" : "fill"),
+        alchemy.admin_clipboard_path(remarkable_type: "pages"),
+        {
+          title: Alchemy.t("Clipboard"),
+          size: "380x305"
+        },
+        class: "icon_button",
+        title: Alchemy.t("Show clipboard"),
+        id: "clipboard_button"
+      ) %>
+    </sl-tooltip>
   </div>
   <div class="toolbar_spacer"></div>
-  <div class="button_with_label<%= @view != "list" ? " active" : nil %>">
-    <%= link_to(
-      render_icon(:stream),
-      alchemy.admin_pages_path(view: "tree"),
-      class: "icon_button"
-    ) %>
-    <label><%= Alchemy.t("Hierarchical") %></label>
+  <div class="toolbar_button">
+    <sl-tooltip content="<%= Alchemy.t("Hierarchical") %>">
+      <%= link_to(
+        render_icon(:"menu-2"),
+        alchemy.admin_pages_path(view: "tree"),
+        class: ["icon_button", @view != "list" && "active"].compact
+      ) %>
+    </sl-tooltip>
   </div>
-  <div class="button_with_label<%= @view == "list" ? " active" : nil %>">
-    <%= link_to(
-      render_icon("sort-amount-down-alt"),
-      alchemy.admin_pages_path(view: "list"),
-      class: "icon_button"
-    ) %>
-    <label><%= Alchemy.t("Sortable List") %></label>
+  <div class="toolbar_button">
+    <sl-tooltip content="<%= Alchemy.t("Sortable List") %>">
+      <%= link_to(
+        render_icon("sort-desc", style: nil),
+        alchemy.admin_pages_path(view: "list"),
+        class: ["icon_button", @view == "list" && "active"].compact
+      ) %>
+    </sl-tooltip>
   </div>
 </div>
 <% search_filter_params[:view] = "list" %>

data/app/views/alchemy/admin/pages/configure.html.erb

@@ -1,16 +1,14 @@
-<div id="overlay_tabs">
-  <ul>
-    <li><a href="#page_properties"><%= Alchemy.t('Properties') %></a></li>
-    <li>
-      <a href="#legacy_urls" id="legacy_urls_label">
-        <%= render 'alchemy/admin/legacy_page_urls/label', count: @page.legacy_urls.size %>
-      </a>
-    </li>
-  </ul>
-  <div id="page_properties">
+<sl-tab-group id="overlay_tabs">
+  <sl-tab slot="nav" panel="page_properties">
+    <%= Alchemy.t('Properties') %>
+  </sl-tab>
+  <sl-tab slot="nav" panel="legacy_urls" id="legacy_urls_label">
+    <%= render 'alchemy/admin/legacy_page_urls/label', count: @page.legacy_urls.size %>
+  </sl-tab>
+  <sl-tab-panel name="page_properties">
     <%= render 'form' %>
-  </div>
-  <div id="legacy_urls">
+  </sl-tab-panel>
+  <sl-tab-panel name="legacy_urls">
     <%= render 'legacy_urls' %>
-  </div>
-</div>
+  </sl-tab-panel>
+</sl-tab-group>