maglevcms 3.0.0.beta2 → 3.0.0

data/app/views/layouts/maglev/editor/_sidebar.html.erb

@@ -2,6 +2,7 @@
   path: editor_pages_path(maglev_editing_route_context), 
   icon: 'file_copy', 
   active: controller_name == 'pages',
+  label: t('maglev.editor.sidebar_nav.list_pages_tooltip'),
   options: {
     data: { controller: 'prevent-same-path' }
   }
@@ -10,21 +11,25 @@
 <% sidebar.with_link(
   path: editor_sections_path(maglev_editing_route_context), 
   icon: 'stack',
-  active: controller_name == 'sections'
+  active: controller_name == 'sections',
+  label: t('maglev.editor.sidebar_nav.manage_page_sections_tooltip')
 ) %>
 
 <% sidebar.with_link(
   path: edit_editor_style_path(maglev_editing_route_context), 
   icon: 'drop',
   active: controller_name == 'style',
+  label: t('maglev.editor.sidebar_nav.edit_style_tooltip'),
   options: {
-    icon_size: '1.25rem'
+    icon_size: '1.25rem',
+    data: { controller: 'prevent-same-path' }
   }
 ) if maglev_theme.style? %>
 
 <% sidebar.with_link(
   path: editor_assets_path, 
   icon: 'image',
+  label: t('maglev.editor.sidebar_nav.open_image_library_tooltip'),
   options: {
     data: { turbo_frame: 'modal' }
   }
@@ -33,6 +38,7 @@
 <% sidebar.with_link(
   path: editor_leave_path, 
   icon: 'logout',
+  label: t('maglev.editor.sidebar_nav.leave_editor_tooltip'),
   options: {
     position: :bottom
   }

data/app/views/layouts/maglev/editor/_topbar.html.erb

@@ -4,17 +4,9 @@
 %>
 
 <% topbar.with_page_info do %>
-  <%= render Maglev::Uikit::AppLayout::Topbar::PageInfoComponent.new(
-    page: current_maglev_page,
-    paths: {
-      edit: edit_editor_page_path(current_maglev_page, maglev_editing_route_context),
-      preview: current_maglev_page_urls[:preview],
-      clone: editor_page_clone_path(current_maglev_page, maglev_editing_route_context),
-      delete: editor_page_path(current_maglev_page, maglev_editing_route_context)
-    },
-    live_page_url: current_maglev_page_urls[:live],
-    prefix_page_path: default_content_locale? ? '' : "#{content_locale}/"
-  ) %>
+  <%= turbo_frame_tag dom_id(current_maglev_page, 'topbar-page-info'), data: { turbo_sync: true } do %>
+    <%= render 'layouts/maglev/editor/topbar/page_info' %>
+  <% end %>
 <% end %>
 
 <% topbar.with_actions do %>
@@ -30,16 +22,7 @@
     current_locale: Maglev::I18n.current_locale,
   ) if maglev_site.many_locales? %>
 
-  <div class="flex items-center h-full px-4">
-    <%= button_to editor_publication_path(maglev_editing_route_context), 
-      method: :post, 
-      class: maglev_button_classes(color: :primary, size: :medium),
-      form_class: 'group/form is-default',
-      data: { controller: 'submit-button' } do %>
-      <%= maglev_button_label(
-        t('maglev.editor.header_nav.publish_button.default'),
-        pending: t('maglev.editor.header_nav.publish_button.in_progress'),
-        )%>
-    <% end %>
-  </div>
+  <%= turbo_frame_tag dom_id(current_maglev_page, 'topbar-publish-button'), data: { turbo_sync: true } do %>
+    <%= render 'layouts/maglev/editor/topbar/publish_button' %>  
+  <% end %>
 <% end %>

data/app/views/layouts/maglev/editor/application.html.erb

@@ -3,6 +3,7 @@
     <title><%= maglev_editor_title %></title>
     <meta name="view-transition" content="same-origin" />
     <meta name="turbo-refresh-method" content="morph">
+    <meta name="turbo-body" content="root">
 
     <meta name="content-locale" content="<%= content_locale %>">
     <meta name="page-preview-url" content="<%= current_maglev_page_urls[:preview] %>">
@@ -38,6 +39,8 @@
       client:sectionBlock:clicked@window->editor-preview-notification-center#editSectionBlock
       client:section:setting:clicked@window->editor-preview-notification-center#editSection
       client:sectionBlock:setting:clicked@window->editor-preview-notification-center#editSection
+      client:section:setting:hovered@window->editor-preview-notification-center#prefetchEditSectionOrBlock
+      client:sectionBlock:setting:hovered@window->editor-preview-notification-center#prefetchEditSectionOrBlock
     "
   >
     <div id="root">
@@ -56,6 +59,9 @@
       <% end %>      
 
       <%= render 'maglev/editor/sections/toolbar_list' %>
+
+      <%# Inside #root so Turbo morph refreshes the new-section URL; visibility uses editor-preview-empty variant (see tailwind.css.erb). %>
+      <%= render 'maglev/editor/pages/preview_empty_message' %>
     </div>
 
     <%= render 'maglev/editor/pages/preview' %>

data/app/views/layouts/maglev/editor/topbar/_page_info.html.erb

@@ -0,0 +1,11 @@
+<%= render Maglev::Uikit::AppLayout::Topbar::PageInfoComponent.new(
+  page: current_maglev_page,
+  paths: {
+    edit: edit_editor_page_path(current_maglev_page, maglev_editing_route_context),
+    preview: current_maglev_page_urls[:preview],
+    clone: clone_editor_page_path(current_maglev_page, maglev_editing_route_context),
+    delete: editor_page_path(current_maglev_page, maglev_editing_route_context)
+  },
+  live_page_url: current_maglev_page_urls[:live],
+  prefix_page_path: default_content_locale? ? '' : "#{content_locale}/"
+) %>

data/app/views/layouts/maglev/editor/topbar/_publish_button.html.erb

@@ -0,0 +1,35 @@
+<div class="flex items-center h-full px-4">
+  <%= render Maglev::Uikit::ButtonGroupComponent.new do |button_group| %>
+    <% button_group.with_button do %>
+      <%= button_to editor_publication_path(maglev_editing_route_context), 
+        method: :post, 
+        class: button_group.wrapped_button_classes,
+        form_class: button_group.wrapper_classes(class: 'group/form is-default'),
+        disabled: !unpublished_changes?,
+        data: { 
+          controller: 'submit-button',
+          turbo_confirm: t('maglev.editor.header_nav.publish_button.publish_confirm')
+        } do %>
+        <%= maglev_button_label(t('maglev.editor.header_nav.publish_button.default'), pending: t('maglev.editor.header_nav.publish_button.in_progress'),) %>
+      <% end %>
+    <% end %>  
+
+    <% button_group.with_button do %>
+      <%= render Maglev::Uikit::MenuDropdownComponent.new(
+        icon_name: 'arrow_down', 
+        wrapper_classes: button_group.wrapper_classes,
+        trigger_classes: button_group.wrapped_button_classes(class: 'px-2!') 
+      ) do |dropdown| %>      
+        <% dropdown.with_item_button_to(discard_draft_editor_page_path(current_maglev_page.id, **maglev_editing_route_context), 
+          method: :post, 
+          data: { 
+            turbo_confirm: t('maglev.editor.header_nav.publish_button.discard_draft_confirm')
+          }) do |menu_item| %>
+          <% menu_item.with_icon_content('history') %>
+          <% menu_item.with_label_content(t('maglev.editor.header_nav.publish_button.discard_draft')) %>
+          <% menu_item.with_sub_label_content(l(current_maglev_page.published_at, format: :long)) %>
+        <% end %>        
+      <% end %>
+    <% end if current_maglev_page.discard_draft? %>
+  <% end %>
+</div>

data/app/views/maglev/editor/assets/index.html.erb

@@ -25,5 +25,6 @@
       </div>
 
       <%= render 'list', assets: @assets, pagy: @pagy %>
+    </div>
   <% end %>
 <% end %>

data/app/views/maglev/editor/home/index.html.erb

@@ -1 +1 @@
-<p class="text-green-500">Hello world!!!!</p>
+<!-- this is the home page for the editor -->

data/app/views/maglev/editor/links/edit/_email.html.erb

@@ -1,5 +1,5 @@
 <div class="mt-2 grid grid-cols-1 gap-4"> 
   <%= f.hidden_field :link_type, value: 'email' %>
 
-  <%= f.text_field :email %>
+  <%= f.text_field :email, autocomplete: 'off' %>
 </div>

data/app/views/maglev/editor/links/edit/_url.html.erb

@@ -1,7 +1,7 @@
 <div class="mt-2 grid grid-cols-1 gap-4">
   <%= f.hidden_field :link_type, value: 'url' %>
 
-  <%= f.text_field :url_href %>
+  <%= f.text_field :url_href, autocomplete: 'off' %>
 
   <%= f.check_box :open_new_window %>
 </div>

data/app/views/maglev/editor/pages/_list.html.erb

@@ -2,27 +2,31 @@
   <% if @pages.empty? %>
     <p class="text-center mt-8"><%= t('maglev.editor.pages.list.empty') %></p>
   <% else %>
-    <% @pages.each do |page| %>
-      <div class="flex items-center pl-4 pr-2 hover:bg-gray-50 transition-colors duration-200">
-        <%= link_to editor_real_root_path(maglev_editing_route_context(page: page)), class: 'flex items-center text-gray-800 overflow-hidden w-full py-3.5 gap-2', data: { turbo_frame: '_top', **maglev_page_preview_reload_data } do %>
-          <%= maglev_page_icon(page) %>
-          <span class="truncate">
-            <%= page.title.presence || page.default_title %>
-          </span>
+    <%= render Maglev::Uikit::List::ListComponent.new do |component| %>
+      <% @pages.each do |page| %>
+        <%# Omit maglev_page_preview_reload_data: it runs before Turbo visits the row URL and reloads the iframe, then syncPreview loads the new preview again (double fetch). %>
+        <% component.with_item_content(id: page.id, link: { url: editor_real_root_path(maglev_editing_route_context(page: page)), data: { turbo_frame: '_top' } }, options: { variant: :ghost }) do |item| %>
+          <% item.with_icon do %>
+            <%= maglev_page_icon(page) %>
+          <% end %>
+
+          <% item.with_title_content(page.title.presence || page.default_title) %>
+          <% item.with_sub_title_content("/" + page.path) %>
+
+          <% item.with_action do %>
+            <%= render Maglev::Uikit::PageActionsDropdownComponent.new(
+              paths: {
+                edit: edit_editor_page_path(page.id, **query_params(from_list: true), **maglev_editing_route_context),
+                preview: maglev_page_preview_url(page),
+                clone: clone_editor_page_path(page.id, maglev_editing_route_context),
+                delete: editor_page_path(page.id, **query_params, **maglev_editing_route_context)
+              },
+              live_url: maglev_page_live_url(page),
+              without_actions: page.index? ? [:delete] : []
+            ) %>
+          <% end %>
         <% end %>
-        <div class="ml-auto pr-2 relative">
-          <%= render Maglev::Uikit::PageActionsDropdownComponent.new(
-            paths: {
-              edit: edit_editor_page_path(page.id, **query_params(from_list: true), **maglev_editing_route_context),
-              preview: maglev_page_preview_url(page),
-              clone: editor_page_clone_path(page.id, maglev_editing_route_context),
-              delete: editor_page_path(page.id, **query_params, **maglev_editing_route_context)
-            },
-            live_url: maglev_page_live_url(page),
-            without_actions: page.index? ? [:delete] : []
-          ) %>
-        </div>
-      </div>
-    <% end %>
+      <% end %>
+    <% end %>   
   <% end %>
 </div>  

data/app/views/maglev/editor/pages/_preview.html.erb

@@ -1,12 +1,14 @@
 <div 
-  class="absolute top-16 left-16 right-0 bottom-0 overflow-hidden group"
+  class="absolute top-16 left-16 right-0 bottom-0 z-0 overflow-hidden group"
   data-controller="editor-page-preview"
   data-action="
     uikit-device-toggler:change@window->editor-page-preview#changeDevice 
     client:ready@window->editor-page-preview#clientReady
     client:ready@window->editor-preview-notification-center#clientReady
     turbo:load@window->editor-page-preview#detectUrlChange
-    dispatcher:page-preview:reload@window->editor-page-preview#startLoading
+    turbo:render@window->editor-page-preview#detectUrlChange
+    pageshow@window->editor-page-preview#detectUrlChange
+    dispatcher:page-preview:reload@window->editor-page-preview#reload
     dispatcher:page-preview:remove-empty-message@window->editor-page-preview#removeEmptyMessage
   "
 >
@@ -20,8 +22,8 @@
       class="bg-white w-full h-full mx-auto transition-discrete transition-all duration-100 ease-in-out group-data-[device=mobile]/device:w-[375px] group-data-[device=tablet]/device:w-[1024px]" 
       data-editor-page-preview-target="iframe"
       data-editor-preview-notification-center-target="iframe"
-      data-editor-preview-notification-center-primary-color-param="<%= maglev_primary_hex_color %>"
-      data-editor-preview-notification-center-sticky-section-ids-param="<%=current_maglev_sections.select(&:sticky?).map(&:id).to_json %>"
+      data-editor-preview-notification-center-primary-color-value="<%= maglev_primary_hex_color %>"
+      data-editor-preview-notification-center-sticky-section-ids-value="<%= current_maglev_sections.select(&:sticky?).map(&:id).to_json %>"
       data-action="load->editor-preview-notification-center#sendConfig"></iframe>
   </div>
 
@@ -30,6 +32,4 @@
       <%= t('maglev.editor.page_preview.loading') %>
     </p>
   </div>
-
-  <%= render 'maglev/editor/pages/preview_empty_message' %>
 </div>

data/app/views/maglev/editor/pages/_preview_empty_message.html.erb

@@ -1,14 +1,17 @@
-<div class="absolute inset-0 flex-col justify-center items-center hidden group-[.is-empty]:flex bg-gray-50">
-  <h2 class="text-center text-2xl font-bold">
-    <%= t('maglev.editor.page_preview.empty.title') %>
-  </h2>
-  <div class="mt-4 text-gray-600 max-w-md mx-auto leading-9">
-    <% new_section_link = capture do %>
-      <%= link_to new_editor_section_path(**maglev_editing_route_context), class: 'text-editor-primary inline-block relative top-1.5' do %>
-        <%= render Maglev::Uikit::IconComponent.new(name: 'stack', size: '1.5rem') %>
+<%# z-[5]: below PageLayoutComponent (z-10 / z-40), above preview shell (z-0). editor-preview-empty: tailwind.css.erb @custom-variant on [data-controller~="editor-page-preview"].is-empty %>
+<div class="fixed top-16 left-16 right-0 bottom-0 z-[5] bg-gray-50 hidden editor-preview-empty:block">
+  <div class="flex min-h-full flex-col items-center justify-center px-4">
+    <h2 class="text-center text-2xl font-bold">
+      <%= t('maglev.editor.page_preview.empty.title') %>
+    </h2>
+    <div class="mt-4 max-w-md mx-auto leading-9 text-gray-600">
+      <% new_section_link = capture do %>
+        <%= link_to new_editor_section_path(**maglev_editing_route_context), class: 'text-editor-primary inline-block relative top-1.5', data: { turbo_frame: 'modal' } do %>
+          <%= render Maglev::Uikit::IconComponent.new(name: 'stack', size: '1.5rem') %>
+        <% end %>
       <% end %>
-    <% end %>
 
-    <%= t('maglev.editor.page_preview.empty.message', button: new_section_link).html_safe %>    
+      <%= t('maglev.editor.page_preview.empty.message', button: new_section_link).html_safe %>
+    </div>
   </div>
 </div>

data/app/views/maglev/editor/pages/discard_draft/create.turbo_stream.erb

@@ -0,0 +1,16 @@
+<%= turbo_stream.console_log 'Discard page draft' %>
+
+<%= turbo_stream.dispatch_event "page-preview:reload", payload: {}.to_json %>
+
+<%= turbo_stream.update dom_id(current_maglev_page, 'topbar-page-info'), method: 'morph' do %>
+  <%= render 'layouts/maglev/editor/topbar/page_info' %>
+<% end %>
+
+<%= turbo_stream.update dom_id(current_maglev_page, 'topbar-publish-button'), method: 'morph' do %>
+  <%= render 'layouts/maglev/editor/topbar/publish_button' %>
+<% end %>
+
+<%= turbo_stream.refresh %>
+
+<%#= turbo_stream.refresh delayed: true %>
+

data/app/views/maglev/editor/pages/index.html.erb

@@ -18,6 +18,13 @@
   </div>
 
   <% page_layout.with_footer do %>
-    <%= link_to t('maglev.editor.pages.list.new_button'), new_editor_page_path(**maglev_editing_route_context, **query_params), class: maglev_button_classes(size: :big), data: { turbo_frame: '_top' } %>
+    <div>
+      <% if defined?(@pagy) && @pagy.present? %>
+        <div class="pb-2">
+          <%= render Maglev::Uikit::PaginationComponent.new(pagy: @pagy, hidden_if_single_page: false, show_info: false) %>
+        </div>
+      <% end %>
+      <%= link_to t('maglev.editor.pages.list.new_button'), new_editor_page_path(**maglev_editing_route_context, **query_params), class: maglev_button_classes(size: :big), data: { turbo_frame: '_top' } %>
+    </div>
   <% end %>
 <% end %>

data/app/views/maglev/editor/publication/create.turbo_stream.erb

@@ -1 +1,3 @@
-<%= turbo_stream.console_log 'Publication created' %>
+<%= turbo_stream.console_log 'Publication created' %>
+
+<%= turbo_stream.refresh delayed: true %>

data/app/views/maglev/editor/section_blocks/_form.html.erb

@@ -1,15 +1,7 @@
-<%= hidden_field_tag 'lock_version', @section_block.lock_version.presence || 0, data: { editor_section_form_target: 'lockVersion' } %>
-
-<% if @section_block.definition.advanced_settings.blank? %>
-  <%= section_block_form_settings(@section, @section_block) %>
-<% else %>
-  <%= render Maglev::Uikit::TabsComponent.new(container_classes: 'w-full h-full flex flex-col') do |tabs| %>
-    <% tabs.with_tab(label: t('maglev.editor.section_blocks.edit.tabs.main')) do %>
-      <%= section_block_form_settings(@section, @section_block) %>
-    <% end %>
-
-    <% tabs.with_tab(label: t('maglev.editor.section_blocks.edit.tabs.advanced')) do %>
-      <%= section_block_form_settings(@section, @section_block, advanced: true) %>
-    <% end %>
+<% if @section_block.definition.empty? %>
+  <%= render Maglev::Uikit::Well::SimpleWellComponent.new do |well| %>
+    <% well.with_title_content(t('maglev.editor.section_blocks.edit.no_settings')) %>
   <% end %>
+<% else %>
+  <%= section_block_form_settings(@section, @section_block, advanced: defined?(advanced) && advanced) %>
 <% end %>

data/app/views/maglev/editor/section_blocks/_form_with_tabs.html.erb

@@ -0,0 +1,15 @@
+<%= hidden_field_tag 'lock_version', source_lock_version, data: { editor_section_form_target: 'lockVersion' } %>
+
+<% if @section_block.definition.advanced_settings.blank? %>
+  <%= render 'maglev/editor/section_blocks/form' %>
+<% else %>
+  <%= render Maglev::Uikit::TabsComponent.new(container_classes: 'w-full h-full flex flex-col') do |tabs| %>
+    <% tabs.with_tab(label: t('maglev.editor.section_blocks.edit.tabs.main')) do %>
+      <%= render 'maglev/editor/section_blocks/form' %>
+    <% end %>
+
+    <% tabs.with_tab(label: t('maglev.editor.section_blocks.edit.tabs.advanced')) do %>
+      <%= render 'maglev/editor/section_blocks/form', advanced: true %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/maglev/editor/section_blocks/_new.html.erb

@@ -6,7 +6,7 @@
     'editor-preview-notification-center-section-id-param': @section.id,
   } do |f| %>
   <%= f.hidden_field :parent_id, value: parent_id if parent_id %>
-  <%= f.hidden_field :lock_version, value: @section.lock_version %>
+  <%= f.hidden_field :lock_version, value: source_lock_version %>
 
   <div class="space-y-4">
     <% blocks.each do |block_definition| %>

data/app/views/maglev/editor/section_blocks/edit.html.erb

@@ -12,7 +12,7 @@
     controller: 'editor-section-form', 
     'editor-section-form-section-id-value': @section.id,
     'editor-section-form-section-block-id-value': @section_block.id,
-    'editor-section-form-section-lock-version-value': @section.lock_version,
+    'editor-section-form-section-lock-version-value': source_lock_version,
     action: %(
       editor-setting:change->editor-section-form#onSettingChange
       editor-section-form:connected@window->editor-preview-notification-center#checkSectionLockVersion
@@ -23,6 +23,6 @@
       dispatcher:section-block-#{@section_block.id}:persisted@window->editor-section-form#onPersist
     )
   } do %>
-    <%= render 'maglev/editor/section_blocks/form' %>
+    <%= render 'maglev/editor/section_blocks/form_with_tabs' %>
   <% end %>
 <% end %>

data/app/views/maglev/editor/section_blocks/index/_list.html.erb

@@ -1,7 +1,7 @@
 <% if @section.blocks.any? %>
   <%= render Maglev::Uikit::List::ListComponent.new(
     sort_form: { 
-      path: sort_editor_section_blocks_path(@section, lock_version: @section.lock_version, **maglev_editing_route_context), 
+      path: sort_editor_section_blocks_path(@section, lock_version: source_lock_version, **maglev_editing_route_context), 
       data: { 
         turbo_frame: '_top',
         action: 'sortable:drag-stopped@window->editor-preview-notification-center#moveSectionBlocks', 
@@ -35,7 +35,7 @@
     <% end %>
   <% end %>
 <% else %>
-  <p class="text-center mt-8 text-gray-800">
+  <p class="text-center mt-8 text-gray-500">
     <%= t('maglev.editor.section_blocks.index.empty') %>
   </p>
 <% end %>

data/app/views/maglev/editor/section_blocks/index/_tree.html.erb

@@ -1,6 +1,6 @@
 <%= render Maglev::Uikit::List::ListComponent.new(
   sort_form: { 
-    path: sort_editor_section_blocks_path(@section, parent_id: parent_id, lock_version: @section.lock_version, **maglev_editing_route_context), 
+    path: sort_editor_section_blocks_path(@section, parent_id: parent_id, lock_version: source_lock_version, **maglev_editing_route_context), 
     data: { turbo_frame: '_top' } 
   },
   sortable_scope: parent_id || 'root',

data/app/views/maglev/editor/section_blocks/update.turbo_stream.erb

@@ -1,5 +1,13 @@
+<%= turbo_stream.dispatch_event "section-block-#{@section_block.id}:persisted", payload: { lockVersion: source_lock_version }.to_json %>
+
 <%= turbo_stream.update 'page-layout-notification', method: 'morph' do %>
   <%= render Maglev::Uikit::BadgeComponent.new(color: :green, icon_name: 'checkbox_circle', disappear_after: 3.seconds).with_content(flash.now[:notice]) %>
 <% end %>
 
-<%= turbo_stream.dispatch_event "section-block-#{@section_block.id}:persisted", payload: { lockVersion: @section_block.lock_version }.to_json %>
+<%= turbo_stream.update dom_id(current_maglev_page, 'topbar-page-info'), method: 'morph' do %>
+  <%= render 'layouts/maglev/editor/topbar/page_info' %>
+<% end %>
+
+<%= turbo_stream.update dom_id(current_maglev_page, 'topbar-publish-button'), method: 'morph' do %>
+  <%= render 'layouts/maglev/editor/topbar/publish_button' %>
+<% end %>

data/app/views/maglev/editor/sections/_form.html.erb

@@ -1,21 +1,7 @@
-<%= hidden_field_tag 'lock_version', @section.lock_version.presence || 0, data: { editor_section_form_target: 'lockVersion' } %>
-
-<% if @section.definition.blocks.none? && !@section.definition.advanced_settings.any? %>
-  <%= section_form_settings(@section) %>
-<% else %>
-  <%= render Maglev::Uikit::TabsComponent.new(container_classes: 'w-full h-full flex flex-col') do |tabs| %>
-    <% tabs.with_tab(label: t('maglev.editor.sections.edit.tabs.main')) do %>
-      <%= section_form_settings(@section) %>
-    <% end %>
-
-    <% tabs.with_tab(label: t('maglev.editor.sections.edit.tabs.advanced')) do %>
-      <%= section_form_settings(@section, advanced: true) %>
-    <% end if @section.definition.advanced_settings.any? %>
-
-    <% tabs.with_tab(
-        label: @section.blocks_label, 
-        link: { url: editor_section_blocks_path(@section, maglev_editing_route_context), html_options: { data: { turbo_frame: '_top' } } }
-      ) unless @section.definition.blocks.none?
-    %>
+<% if @section.definition.empty? %>
+  <%= render Maglev::Uikit::Well::SimpleWellComponent.new do |well| %>
+    <% well.with_title_content(t('maglev.editor.sections.edit.no_settings')) %>
   <% end %>
-<% end %>
+<% else %>
+  <%= section_form_settings(@section, advanced: defined?(advanced) && advanced) %>
+<% end %>

data/app/views/maglev/editor/sections/_form_with_tabs.html.erb

@@ -0,0 +1,21 @@
+<%= hidden_field_tag 'lock_version', source_lock_version, data: { editor_section_form_target: 'lockVersion' } %>
+
+<% if @section.definition.blocks.none? && !@section.definition.advanced_settings.any? %>
+  <%= render 'maglev/editor/sections/form' %>
+<% else %>
+  <%= render Maglev::Uikit::TabsComponent.new(container_classes: 'w-full h-full flex flex-col') do |tabs| %>
+    <% tabs.with_tab(label: t('maglev.editor.sections.edit.tabs.main')) do %>
+      <%= render 'maglev/editor/sections/form' %>
+    <% end %>
+
+    <% tabs.with_tab(label: t('maglev.editor.sections.edit.tabs.advanced')) do %>
+      <%= render 'maglev/editor/sections/form', advanced: true %>      
+    <% end if @section.definition.advanced_settings.any? %>
+
+    <% tabs.with_tab(
+        label: @section.blocks_label, 
+        link: { url: editor_section_blocks_path(@section, maglev_editing_route_context), html_options: { data: { turbo_frame: '_top' } } }
+      ) unless @section.definition.blocks.none?
+    %>
+  <% end %>
+<% end %>

data/app/views/maglev/editor/sections/_list.html.erb

@@ -43,7 +43,7 @@
       <% end %>
     <% end %>
   <% else %>
-    <p class="text-center mt-8 text-gray-800">
+    <p class="text-center mt-8 text-gray-500">
       <%= t('maglev.editor.sections.index.empty') %>
     </p>
   <% end %>

data/app/views/maglev/editor/sections/edit.html.erb

@@ -7,7 +7,7 @@
   <%= form_with url: editor_section_path(@section, maglev_editing_route_context), method: :put, data: { 
       controller: 'editor-section-form', 
       'editor-section-form-section-id-value': @section.id,
-      'editor-section-form-section-lock-version-value': @section.lock_version,
+      'editor-section-form-section-lock-version-value': source_lock_version,
       action: %(
         editor-setting:change->editor-section-form#onSettingChange
         editor-section-form:connected@window->editor-preview-notification-center#checkSectionLockVersion
@@ -18,7 +18,7 @@
         dispatcher:section-#{@section.id}:persisted@window->editor-section-form#onPersist
       )
     } do 
-  %>    
-    <%= render 'maglev/editor/sections/form' %>
+  %>        
+    <%= render 'maglev/editor/sections/form_with_tabs' %>
   <% end %>
 <% end %>

data/app/views/maglev/editor/sections/index.html.erb

@@ -6,6 +6,6 @@
   <%= render 'list' %>
 
   <% page_layout.with_footer do %>
-    <%= link_to t('maglev.editor.sections.index.add_button'), new_editor_section_path(maglev_editing_route_context), class: maglev_button_classes(size: :big), data: { turbo_frame: '_top' } %>
+    <%= link_to t('maglev.editor.sections.index.add_button'), new_editor_section_path(maglev_editing_route_context), class: maglev_button_classes(size: :big), data: { turbo_frame: 'modal' } %>
   <% end %>
 <% end %>

data/app/views/maglev/editor/sections/new.html.erb

@@ -1,3 +1,20 @@
+<%= turbo_frame_tag 'modal' do %>
+  <%= render Maglev::Uikit::ModalComponent.new(id: 'new-section-modal', open: true) do |modal| %>    
+    <% modal.with_title_content t('maglev.editor.sections.new.title') %>
+    <% modal.with_notification_content maglev_flash_message %>
+
+    <div class="flex h-[calc(100dvh-16rem)] min-h-0 w-[calc(100dvw-4rem)] flex-col gap-2 lg:w-3xl xl:w-5xl">
+      <%= render 'maglev/editor/sections/theme/search' %>
+      
+      <% if @theme_sections.any? %>
+        <%= render 'maglev/editor/sections/theme/list' %>
+      <% else %>
+        <%= render 'maglev/editor/sections/theme/empty_list' %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>
+
 <%= render Maglev::Uikit::PageLayoutComponent.new(expanded: true, back_path: editor_real_root_path(maglev_editing_route_context)) do |page_layout| %>
   <% page_layout.with_title_content t('maglev.editor.sections.new.title') %>
   <% page_layout.with_notification_content maglev_flash_message %>
@@ -17,4 +34,4 @@
 
     <%= render 'theme_list', f: f %>
   <% end %>
-<% end %>
+<% end if false %>

data/app/views/maglev/editor/sections/theme/_empty_list.html.erb

@@ -0,0 +1,3 @@
+<div class="flex min-h-0 flex-1 flex-col items-center justify-center px-4 py-12">
+  <p class="text-gray-500"><%= t('maglev.editor.sections.new.empty_list') %></p>
+</div>

data/app/views/maglev/editor/sections/theme/_list.html.erb

@@ -0,0 +1,35 @@
+<div class="relative -mx-4 -my-4 flex min-h-0 flex-1 flex-col overflow-y-auto">
+  <%= form_with url: editor_sections_path(maglev_editing_route_context), html: { class: 'flex min-h-0 w-full flex-1 flex-col' }, data: { 
+        turbo_frame: '_top',
+        controller: 'auto-save dispatcher',
+        action: %(
+          turbo:submit-end->editor-preview-notification-center#addSection
+          turbo:submit-end->dispatcher#trigger
+          turbo:submit-end->uikit-modal#close:self
+        ),
+        'dispatcher-event-name-value': 'page-preview:remove-empty-message'
+      } do |f| %>
+      <%= f.hidden_field :position, value: @position %>
+
+    <div class="grid w-full grid-cols-1 gap-4 px-4 py-4 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
+      <% @theme_sections.each do |section| %>  
+        <%= render Maglev::Uikit::List::ListItemComponent.new(options: { 
+            wrapper_tag: :label,
+            wrapper_classes: 'cursor-pointer transition duration-150 ease-in-out transform hover:scale-105 hover:z-10 hover:ring-2 hover:ring-inset hover:ring-editor-primary/50' }
+          ) do |item| %>
+          <% item.with_big_image do %>
+            <% if screenshot_url = services.fetch_section_screenshot_url.call(section: section) %>
+              <%= image_tag screenshot_url, class: item.big_image_classes(class: 'rounded-md border border-gray-200'), data: { controller: 'broken-image' } %>
+            <% else %>
+              <%= render 'maglev/editor/sections/theme/screenshot_placeholder' %>
+            <% end %>        
+          <% end %>
+            
+          <% item.with_title_content(section.human_name) %>   
+
+          <%= f.radio_button :section_type, section.id, class: 'sr-only peer' %>   
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/views/maglev/editor/sections/theme/_screenshot_placeholder.html.erb

@@ -0,0 +1,6 @@
+<div class="relative bg-gray-200 rounded p-4">
+  <div class="h-12 bg-gray-300 mb-3 rounded"></div>
+  <div class="h-3 bg-gray-300 w-2/3 mb-2 rounded"></div>
+  <div class="h-3 bg-gray-300 w-1/2 mb-3 rounded"></div>
+  <div class="h-6 bg-gray-400 w-24 rounded"></div>
+</div>